vue.js 展示一个树形结构的数据视图，并禁用其中默认选中的节点
功能描述
-
展示树形结构：
- 使用 Element UI 的
<el-tree>组件展示树形结构数据。 - 数据由
content数组提供，树形结构包含了嵌套的节点及其子节点。
- 使用 Element UI 的
-
默认选中节点：
- 使用
defaultCheckedKeys属性指定默认选中的节点。 - 这些节点在树形结构渲染时会被默认选中。
- 使用
-
禁用默认选中的节点：
- 自定义
props来配置节点属性，其中disabled属性用于禁用默认选中的节点。 - 在
created生命周期钩子中，递归处理节点数据，设置disabled属性为true
- 自定义
<template>
<div>
<el-tree
:data="content"
show-checkbox
node-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方法实现。
