广东新闻联播片头_专业网站设计第三方_百度免费推广网站_seo排名工具给您好的建议下载官网

功能描述

1. 展示树形结构：

   • 使用 Element UI 的 <el-tree> 组件展示树形结构数据。
   • 数据由 content 数组提供，树形结构包含了嵌套的节点及其子节点。

2. 默认选中节点：

   • 使用 defaultCheckedKeys 属性指定默认选中的节点。
   • 这些节点在树形结构渲染时会被默认选中。

3. 禁用默认选中的节点：

   • 自定义 props 来配置节点属性，其中 disabled 属性用于禁用默认选中的节点。
   • 在 created 生命周期钩子中，递归处理节点数据，设置 disabled 属性为 true

<template><div><el-tree:data="content"show-checkboxnode-key="id":default-checked-keys="defaultCheckedKeys"></el-tree></div></template><script>import 'element-ui/lib/theme-chalk/index.css';import { Tree } from 'element-ui';export default {components: {'el-tree': Tree},data() {return {content: [{id: 543,label: "首页",business_type: 0,icon: "el-icon-s-home"},{id: 547,label: "up内容质量",business_type: 0,children: [{id: 549,label: "聚集规则",business_type: 0,children: [{id: 551,label: "分页获取聚集规则",business_type: 0,icon: "el-icon-more"},{id: 553,label: "创建聚集规则",business_type: 0,icon: "el-icon-plus"},{id: 555,label: "修改聚集规则",business_type: 0,icon: "el-icon-edit"},{id: 557,label: "删除聚集规则",business_type: 0,icon: "el-icon-delete"}],icon: "el-icon-document"},{id: 559,label: "违反明细",business_type: 0,children: [{id: 686,label: "导出明细",business_type: 0,icon: "el-icon-download"},{id: 710,label: "分页获取明细",business_type: 0,icon: "el-icon-more"}],icon: "el-icon-document"},{id: 561,label: "子规则设置",business_type: 0,children: [{id: 563,label: "分页获取子规则",business_type: 0,icon: "el-icon-more"},{id: 565,label: "创建子规则",business_type: 0,icon: "el-icon-plus"},{id: 567,label: "修改子规则",business_type: 0,icon: "el-icon-edit"},{id: 569,label: "删除子规则",business_type: 0,icon: "el-icon-delete"}],icon: "el-icon-document"},{id: 571,label: "聚集违反明细",business_type: 0,children: [{id: 612,label: "分页获取违反明细",business_type: 0,icon: "el-icon-more"},{id: 613,label: "打标导出",business_type: 0,icon: "el-icon-download"},{id: 687,label: "导出明细",business_type: 0,icon: "el-icon-download"}],icon: "el-icon-document"},{id: 573,label: "策略说明",business_type: 0,icon: "el-icon-goblet-square"},{id: 622,label: "检测类型管理",business_type: 0,children: [{id: 623,label: "分页获取检测类型管理",business_type: 0,icon: "el-icon-more"},{id: 624,label: "创建检测类型管理",business_type: 0,icon: "el-icon-plus"},{id: 625,label: "修改检测类型管理",business_type: 0,icon: "el-icon-edit"},{id: 626,label: "删除检测类型管理",business_type: 0,icon: "el-icon-delete"}],icon: "el-icon-search"}],icon: "el-icon-microphone"}],defaultCheckedKeys: [543, 551, 555, 710, 565]};},created() {this.addDisabledProperty(this.content);},methods: {addDisabledProperty(nodes) {nodes.forEach(node => {if (this.defaultCheckedKeys.includes(node.id)) {node.disabled = true;}if (node.children && node.children.length > 0) {this.addDisabledProperty(node.children);}});}}};</script><style>/* 你的样式代码 */</style>

总结

• 展示树形结构：使用 <el-tree> 组件渲染树形结构数据，并显示复选框。
• 默认选中节点：将树节点默认选中，并通过 defaultCheckedKeys 指定。
• 禁用选中节点：在方法中遍历节点数据，添加 disabled 属性来禁用默认选中的节点。通过 defaultProps 属性中的 disabled 方法实现。