el tree 使用

最新推荐文章于 2025-03-14 10:20:38 发布

azhang190426

最新推荐文章于 2025-03-14 10:20:38 发布

阅读量455

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/azhang190426/article/details/119869991

版权

vue 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了Element UI Tree组件的高级用法，包括如何设置默认展开节点、默认选中节点、严格检查模式以及如何遍历获取勾选子节点。同时，还讲解了如何自定义缩进和使用formatter格式化内容，例如根据状态码显示不同文字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://element.eleme.cn/#/zh-CN/component/tree

1. 想要把选中的节点默认展开：:default-expanded-keys="[2, 3]"

使用场景举例：对已有数据编辑，希望能够展开已选的值方便查看

2. 想要打开的时候把已经勾选的值默认勾选 :default-checked-keys="[5]"

使用场景：对已有数据编辑，希望查看已勾选的值

3. 想要实现勾选的父节点默认勾选所以子节点： :check-strictly="false"

使用场景：希望勾选父节点字段勾选父节点下的所有值

反过来想要实现勾选子节点不影响父节点： :check-strictly='true'

使用场景：希望打开编辑页面，只看到勾选的子节点，而不会自动勾选父节点下的所有节点。

4. 如何遍历树获取勾选的子节点，不包括父节点

getcheckedItems(data) {
      var nodeMap = {};
      data.forEach((node) => {
        let parentId = node["parentId"];
        if (nodeMap[parentId] == null) {
          nodeMap[parentId] = [];
        }
        nodeMap[parentId].push(node);
      });
      let result = data.filter((item) => {
        return nodeMap[item["menuId"]] == undefined;
      });
      return result;
    },

5.tree 的缩进是默认16px,如果要修改通过属性indent 进行赋值。:indent=32 表示缩进32px。

使用disabled ：

<el-tree
:data="data"
show-checkbox
node-key="id"
:default-checked-keys="[4]">
</el-tree>

data: [{
id: 1,
label: '一级 2',
children: [{
id: 3,
label: '二级 2-1',
children: [{
id: 4,
label: '三级 3-1-1',
disabled:true

}]
}]
}]

6. formatter的使用 formatter --用来格式化内容, 可接受参数为：Function(row, column, cellValue, index)

场景：对于没一行的数据需要把状态码 1,2 分别显示为A,B 。

<el-table-column
prop="status"
label="状态"
:formatter="formatter">
</el-table-column>

methods: {
formatter(row) {
if(row.status==1){
return 'A'
}else{
return 'B';
}
}
}