-
展示树状结构数据：
- 从
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，获取对应的游戏名称。
<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 : '';
}
}
![[vulnhub] Prime 1](https://i-blog.csdnimg.cn/direct/b8e8cc8f549847fb9d9b18af89423380.png)
