-
展示树状结构数据：
- 从
jsonData读取树状结构的 JSON 数据，将其解析并生成 HTML 列表来展示。 - 树状结构数据根据
id和label属性组织，节点可以包含子节点children。
- 从
-
展示评级信息：
- 从预定义的表单字段
form中读取arRateFlag和arGameId，将它们转换为对应的标签和游戏名称，并在页面上展示。
- 从预定义的表单字段
-
动态生成 HTML 内容：
- 在组件创建时 (
created钩子)，根据jsonData的内容，动态生成展示树状数据和评级信息的 HTML 字符串，并插入到页面中。
- 在组件创建时 (
具体功能步骤
-
数据初始化：
- 定义树状结构数据
jsonData及其对应的空数组nodes。 - 定义评级类型选项
rateFlagOptions和游戏 ID 选项normalRateGameIdOptions。 - 定义表单数据
form，包含多个arRateFlag和arGameId。
- 定义树状结构数据
-
组件创建时：
- 如果
jsonData不为空，则解析 JSON 数据并调用generateTreeHtml和generateRateHtml方法生成 HTML 内容。 - 如果
jsonData为空，只生成评级信息。
- 如果
-
方法说明：
generateTreeHtml(nodes): 递归地生成树状结构的 HTML 列表，展示节点标签及其子节点。generateRateHtml(): 根据表单数据生成评级类型和游戏 ID 对应的 HTML 内容。getRateFlagLabel(value): 根据提供的评级标志值，获取对应的标签文本。getGameName(gameId): 根据提供的游戏 ID，获取对应的游戏名称。
javascript"><template><div v-html="treeHtmlContent"></div>
</template><script>
export default {data() {return {jsonData: `[{"id": 547,"label": "up内容质量","business_type": 0,"children": [{"id": 561,"label": "孙子兵法设置","business_type": 0,"children": [{"id": 567,"label": "修改孙子兵法","业务类型": 0},{"id": 569,"label": "删除孙子兵法","业务类型": 0}]},{"id": 571,"label": "聚集舞会明细","业务类型": 0,"children": [{"id": 607,"label": "分页获取违规明细","业务类型": 0}]},{"id": 647,"label": "检测类型管理","业务类型": 0,"children": [{"id": 649,"label": "分页获取检测类型管理","业务类型": 0},{"id": 651,"label": "创建检测类型管理","业务类型": 0},{"id": 653,"label": "修改检测类型管理","业务类型": 0},{"id": 655,"label": "删除检测类型管理","业务类型": 0}]}]},{"id": 575,"label": "up评级后台","业务类型": 0,"children": [{"id": 577,"label": "up评级","业务类型": 0,"children": [{"id": 695,"label": "导入评级","业务类型": 0},{"id": 697,"label": "评级打分","业务类型": 0}]},{"id": 583,"label": "评分规则设置","业务类型": 0,"children": [{"id": 587,"label": "创建评分规则设置","业务类型": 0}]}]}]`,nodes: [],treeHtmlContent: '',rateFlagOptions: [{label: '娱乐/游戏新up评级', value: 0},{label: '高潜up专项', value: 1}],normalRateGameIdOptions: [{id: 4,rateFlag: 0,gameId: '2633',gameName: '二次元',anchorType: '["舞见coser","治愈哄睡","虚拟up","露脸唱见","电台声优"]',updateName: 'zhouhao',createdAt: '2024-02-04T00:04:00+08:00',updatedAt: '2024-02-04T04:00:00+08:00',createBy: 1,updateBy: 1},{id: 3,rateFlag: 0,gameId: '2165',gameName: '户外',anchorType: '["城市","乡野","美食","徒步","厨娘","瑜伽","其它"]',updateName: 'zhouhao',createdAt: '2024-02-04T00:03:00+08:00',updatedAt: '2024-02-04T03:00:00+08:00',createBy: 1,updateBy: 1},{id: 2,rateFlag: 0,gameId: '2168',gameName: '颜值',anchorType: '["音乐","舞蹈","脱口秀"]',updateName: 'zhouhao',createdAt: '2024-02-04T00:02:00+08:00',updatedAt: '2024-02-04T02:00:00+08:00',createBy: 1,updateBy: 1},{id: 1,rateFlag: 0,gameId: '1663',gameName: '星秀',anchorType: '["舞蹈","好声音","脱口秀","女团"]',updateName: 'zhouhao',createdAt: '2024-02-04T00:01:00+08:00',updatedAt: '2024-02-04T01:00:00+08:00',createBy: 1,updateBy: 1}],form: {arRateFlag: '0,1',arGameId: '2633,2165,2168,1663'}};},created() {let content;if (this.jsonData === '') {content = this.generateRateHtml();} else {this.nodes = JSON.parse(this.jsonData);content = this.generateTreeHtml(this.nodes) + this.generateRateHtml();}this.treeHtmlContent = `<div style="max-height: 500px; overflow-y: auto;">${content}</div>`;},methods: {generateTreeHtml(nodes) {if (!nodes || nodes.length === 0) return '';let html = '<ul style="list-style: disc; padding-left: 0; text-align: left;">';for (let node of nodes) {html += `<li style="font-size: 14px; line-height: 1em; text-align: left; margin-left: 20px;margin-top:8px">${node.label}`;if (node.children && node.children.length > 0) {html += this.generateTreeHtml(node.children);}html += '</li>';}html += '</ul>';return html;},generateRateHtml() {let rateFlags = '';if (this.form.arRateFlag) {rateFlags = this.form.arRateFlag.split(',').map(flag => this.getRateFlagLabel(flag)).join('、');}let gameNames = '';if (this.form.arGameId) {gameNames = this.form.arGameId.split(',').map(id => this.getGameName(id)).join('、');}let html = '<div style="text-align: left; margin-left: 20px; font-size: 14px;">';if (rateFlags) {html += `<div>评级类型：${rateFlags}</div>`;}if (gameNames) {html += `<div>娱乐/游戏评级的评级品类：${gameNames}</div>`;}html += '</div>';return html;},getRateFlagLabel(value) {const option = this.rateFlagOptions.find(opt => opt.value == value);return option ? option.label : '';},getGameName(gameId) {const option = this.normalRateGameIdOptions.find(opt => opt.gameId == gameId);return option ? option.gameName : '';}}
};
</script>主要功能
-
数据定义 (
data):jsonData: 包含树状结构的 JSON 数据，预先定义好。nodes: 解析后的树节点数组。treeHtmlContent: 用于展示树结构及评级信息的 HTML 字符串。rateFlagOptions和normalRateGameIdOptions: 用于存储评级和游戏标志选项。form: 包含表单的评级标志和游戏 ID。
-
created生命周期钩子:
- 在组件创建时，检查
jsonData是否为空。 - 解析
jsonData并生成树状 HTML 结构，添加评级 HTML。 - 设置
treeHtmlContent，包裹在一个带滚动条的div内。
- 在组件创建时，检查
-
方法:
generateTreeHtml(nodes): 递归地生成树状结构 HTML 字符串。generateRateHtml(): 生成评级 HTML 字符串，包含评级类型和游戏名称。getRateFlagLabel(value): 根据rateFlag值查找并返回对应的标签。getGameName(gameId): 根据gameId查找并返回对应的游戏名称。
javascript"> created() {let content;// 如果 jsonData 为空，则生成默认的评级HTMLif (this.jsonData === '') {content = this.generateRateHtml();} else {// 将 jsonData 解析为 nodesthis.nodes = JSON.parse(this.jsonData);// 生成树状结构的HTML并附加到评级HTMLcontent = this.generateTreeHtml(this.nodes) + this.generateRateHtml();}// 将内容包裹在一个带有滚动条的 div 内并赋值给 treeHtmlContentthis.treeHtmlContent = `<div style="max-height: 500px; overflow-y: auto;">${content}</div>`;},methods: {// 生成树状结构HTML的方法generateTreeHtml(nodes) {if (!nodes || nodes.length === 0) return '';let html = '<ul style="list-style: disc; padding-left: 0; text-align: left;">';for (let node of nodes) {html += `<li style="font-size: 14px; line-height: 1em; text-align: left; margin-left: 20px;margin-top:8px">${node.label}`;if (node.children && node.children.length > 0) {html += this.generateTreeHtml(node.children);}html += '</li>';}html += '</ul>';return html;},// 生成评级HTML的方法generateRateHtml() {let rateFlags = '';if (this.form.arRateFlag) {rateFlags = this.form.arRateFlag.split(',').map(flag => this.getRateFlagLabel(flag)).join('、');}let gameNames = '';if (this.form.arGameId) {gameNames = this.form.arGameId.split(',').map(id => this.getGameName(id)).join('、');}let html = '<div style="text-align: left; margin-left: 20px; font-size: 14px;">';if (rateFlags) {html += `<div>评级类型：${rateFlags}</div>`;}if (gameNames) {html += `<div>娱乐/游戏评级的评级品类：${gameNames}</div>`;}html += '</div>';return html;},// 根据 value 获取评级标志的标签getRateFlagLabel(value) {const option = this.rateFlagOptions.find(opt => opt.value == value);return option ? option.label : '';},// 根据 gameId 获取游戏名称getGameName(gameId) {const option = this.normalRateGameIdOptions.find(opt => opt.gameId == gameId);return option ? option.gameName : '';}}
