vue.js 展示树状结构数据,动态生成 HTML 内容

1. 展示树状结构数据：

   • 从 jsonData 读取树状结构的 JSON 数据，将其解析并生成 HTML 列表来展示。
   • 树状结构数据根据 id 和 label 属性组织，节点可以包含子节点 children。

2. 展示评级信息：

   • 从预定义的表单字段 form 中读取 arRateFlag 和 arGameId，将它们转换为对应的标签和游戏名称，并在页面上展示。

3. 动态生成 HTML 内容：

   • 在组件创建时 (created 钩子)，根据 jsonData 的内容，动态生成展示树状数据和评级信息的 HTML 字符串，并插入到页面中。

具体功能步骤

1. 数据初始化：

   • 定义树状结构数据 jsonData 及其对应的空数组 nodes。
   • 定义评级类型选项 rateFlagOptions 和游戏 ID 选项 normalRateGameIdOptions。
   • 定义表单数据 form，包含多个 arRateFlag 和 arGameId。

2. 组件创建时：

   • 如果 jsonData 不为空，则解析 JSON 数据并调用 generateTreeHtml 和 generateRateHtml 方法生成 HTML 内容。
   • 如果 jsonData 为空，只生成评级信息。

3. 方法说明：

   • generateTreeHtml(nodes): 递归地生成树状结构的 HTML 列表，展示节点标签及其子节点。
   • generateRateHtml(): 根据表单数据生成评级类型和游戏 ID 对应的 HTML 内容。
   • getRateFlagLabel(value): 根据提供的评级标志值，获取对应的标签文本。
   • getGameName(gameId): 根据提供的游戏 ID，获取对应的游戏名称。

<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 查找并返回对应的游戏名称。

 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 : '';}}