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 为空，则生成默认的评级HTML
    if (this.jsonData === '') {
      content = this.generateRateHtml();
    } else {
      // 将 jsonData 解析为 nodes
      this.nodes = JSON.parse(this.jsonData);
      // 生成树状结构的HTML并附加到评级HTML
      content = this.generateTreeHtml(this.nodes) + this.generateRateHtml();
    }
    // 将内容包裹在一个带有滚动条的 div 内并赋值给 treeHtmlContent
    this.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 : '';
    }
 }