网站框架有哪些,app网站建设阿里巴巴,外贸流程英文版,国外服装购物网站大全展示树状结构数据#xff1a; 从 jsonData 读取树状结构的 JSON 数据#xff0c;将其解析并生成 HTML 列表来展示。树状结构数据根据 id 和 label 属性组织#xff0c;节点可以包含子节点 children。 展示评级信息#xff1a; 从预定义的表单字段 form 中读取 arRateFlag 和… 展示树状结构数据 从 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获取对应的游戏名称。
templatediv v-htmltreeHtmlContent/div
/templatescript
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:0008:00,updatedAt: 2024-02-04T04:00:0008:00,createBy: 1,updateBy: 1},{id: 3,rateFlag: 0,gameId: 2165,gameName: 户外,anchorType: [城市,乡野,美食,徒步,厨娘,瑜伽,其它],updateName: zhouhao,createdAt: 2024-02-04T00:03:0008:00,updatedAt: 2024-02-04T03:00:0008:00,createBy: 1,updateBy: 1},{id: 2,rateFlag: 0,gameId: 2168,gameName: 颜值,anchorType: [音乐,舞蹈,脱口秀],updateName: zhouhao,createdAt: 2024-02-04T00:02:0008:00,updatedAt: 2024-02-04T02:00:0008:00,createBy: 1,updateBy: 1},{id: 1,rateFlag: 0,gameId: 1663,gameName: 星秀,anchorType: [舞蹈,好声音,脱口秀,女团],updateName: zhouhao,createdAt: 2024-02-04T00:01:0008:00,updatedAt: 2024-02-04T01:00:0008: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 stylemax-height: 500px; overflow-y: auto;${content}/div;},methods: {generateTreeHtml(nodes) {if (!nodes || nodes.length 0) return ;let html ul stylelist-style: disc; padding-left: 0; text-align: left;;for (let node of nodes) {html li stylefont-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 styletext-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 stylemax-height: 500px; overflow-y: auto;${content}/div;},methods: {// 生成树状结构HTML的方法generateTreeHtml(nodes) {if (!nodes || nodes.length 0) return ;let html ul stylelist-style: disc; padding-left: 0; text-align: left;;for (let node of nodes) {html li stylefont-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 styletext-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 : ;}}
