功能描述
-
展示树形结构：
- 使用 Element UI 的
<el-tree>组件展示树形结构数据。 - 数据由
content数组提供，树形结构包含了嵌套的节点及其子节点。
- 使用 Element UI 的
-
默认选中节点：
- 使用
defaultCheckedKeys属性指定默认选中的节点。 - 这些节点在树形结构渲染时会被默认选中。
- 使用
-
禁用默认选中的节点：
- 自定义
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方法实现。
