【Element】el-tree 树形控件

宾果的救星

已于 2023-09-14 09:39:36 修改

阅读量1.1w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： # Element 文章标签： elementui vue.js javascript

于 2022-12-10 03:00:00 首次发布

本文链接：https://blog.youkuaiyun.com/wuli_youhouli/article/details/127885319

Element 专栏收录该内容

17 篇文章

订阅专栏

本文介绍ElementUI和ElementPlus中树形组件的多种实用配置与技巧，包括节点选择限制、复选框控制、节点筛选及父子联动等功能实现方式。

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

转载请注明：宾果的救星的博客_优快云博客

ElementUI

公共参数

treeContent:[
  {
    name: '1',
    id: 1,
    level: 1,
    children: [
      {
        name: '2-1',
        id: 21,
        level: 2,
        children: [
          {
            name: '3-1',
            id: 31,
            level: 3,
            children:[]
          },
          {
            name: '3-2',
            id: 32,
            level: 3,
            children:[]
          }
        ]
      },
      {
        name: '2-2',
        id: 22,
        level: 2,
        children: [
          {
            name: '3-3',
            id: 33,
            level: 3,
            children:[]
          },
          {
            name: '3-4',
            id: 34,
            level: 3,
            children:[]
          }
        ]
      }
    ]
  }
],


defaultProps: {
  children: "children",
  label: "name",
},

基础用法

accordion 手风琴

:highlight-current="true" 高亮

@node-click 节点被点击
@check-change 节点发生变化

<el-tree
  accordion
  :data="treeContent"
  :highlight-current="true"
  :props="defaultProps"
  @node-click="handleNodeClick"
  @check-change="checkChange"
></el-tree>

handleNodeClick(data) {
  if (data.id == 1) {
    // ...
  } 
},
checkChange(current, isChecked) {
  if (isChecked) {
    this.$refs.Tree.setCheckedNodes([current]);
  }
},

最后一层不可选择

思路一：第三层设置disable

单纯设置disabled无法选中。

<el-tree
  ref="tree"
  :data="treeContent"
  show-checkbox
  :highlight-current="true"
  :props="defaultProps"
></el-tree>

created() {
  this.dg(this.treeContent);
},

dg(list) {
  list && list.forEach((v) => {
    v.disabled = v.level == 3;
    if (v.children && v.children.length > 0) {
      this.dg(v.children);
    }
  });
},

思路二：利用样式隐藏掉第三层的选框

/deep/ .el-tree>.el-tree-node >.el-tree-node__children>.el-tree-node > .el-tree-node__children > .el-tree-node >.el-tree-node__content>label.el-checkbox  {
  display: none!important;
}

3.复选框改变的事件

<el-tree
  ref="taskContents"
  :data="treeContent"
  show-checkbox
  :highlight-current="true"
  :props="defaultProps"
  @check="handleContentCheck"
></el-tree>

handleContentCheck(n, obj) {
  console.log('n=====>', n);
  console.log('obj=====>', obj)
  let nodes = []
  obj.checkedNodes.forEach((v) => {
    if (v.level !== 3) {
      nodes.push(v)
    }
  });
  console.log('nodes =====>', nodes)
},

n：为当前选中节点

obj：为当前树选中的所有节点

nodes：过滤掉第三层level=3 的节点

最后一层展示复选框

<el-tree
  ref="users"
  :data="treeContent"
  show-checkbox
  :highlight-current="true"
  :props="defaultProps"
  @check-change="handleNodeClick"
></el-tree>

created() {
  this.dg(this.treeContent);
},

dg(list) {
  list && list.forEach((v) => {
    v.disabled = v.level != 3;
    if (v.children && v.children.length > 0) {
      this.dg(v.children);
    }
  });
},

handleNodeClick() {
  let ids = this.$refs.users.getCheckedNodes(true);
},

这个时候就要使用样式隐藏disable的选框了。

<style lang="less" scoped>

/deep/.el-checkbox__input.is-disabled {
  display: none;
}

</style>

节点筛选

expand-on-click-node="false" 点击节点不展开

default-expand-all 默认全部展开
highlight-current 高亮行

<el-input v-model="name" placeholder="请输入名称" clearable/>
<el-tree ref="tree"
    :data="treeContent" 
    :props="defaultProps" 
    :expand-on-click-node="false"
    :filter-node-method="filterNode"  
    default-expand-all 
    highlight-current
/>

watch: {
  name(val) {
    this.$refs.tree.filter(val);
  }
},

// 筛选节点
filterNode(value, data) {
  if (!value) return true;
  return data.name.indexOf(value) !== -1;
},

展开/折叠、全选/全不选、父子联动

<el-form-item label="菜单权限">
  <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>
  <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
  <el-checkbox v-model="menuCheckStrictly" @change="handleCheckedTreeConnect($event)">父子联动</el-checkbox>
  <el-tree
    class="tree-border"
    ref="menu"
    node-key="id"
    :data="treeContent"
    :props="defaultProps"
    :check-strictly="!menuCheckStrictly"
    show-checkbox
    empty-text="加载中，请稍候"
  ></el-tree>
</el-form-item>

data() {
  return {
    menuExpand: false,
    menuNodeAll: false,
    menuCheckStrictly: true,
  }
}

// 展开/折叠
handleCheckedTreeExpand(value) {
  let treeList = this.treeContent;
  for (let i = 0; i < treeList.length; i++) {
    this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
  }
},
// 全选/全不选
handleCheckedTreeNodeAll(value) {
  this.$refs.menu.setCheckedNodes(value ? this.treeContent: []);
},
// 父子联动
handleCheckedTreeConnect(value) {
  this.menuCheckStrictly = value ? true: false;
},

checkbox被触发两次

使用check-change导致的触发两次事件，可以将check-change改成check

<el-tree
  ref="users"
  :data="treeContent"
  show-checkbox
  @check-change="handleNodeClick"
></el-tree>

改为

<el-tree
  ref="users"
  :data="treeContent"
  show-checkbox
  @check="handleNodeClick"
></el-tree>

ElementPlus

默认选中第一个

<el-tree
  class="filter-tree"
  ref="treeRef"
  node-key="id"
  :data="treeContent"
  :default-expand-all="true"
  :highlight-current="true"
  :expand-on-click-node="false"
  :filter-node-method="filterNode"
  @node-click="handleNodeClick"
>
  <template #default="{ node, data }">
    <span class="span-ellipsis">{{ data.name }}</span>
  </template>
</el-tree>

setup(){
  const id = ref();
  const treeContent = ref();
  const treeRef = ref();

  onActivated(() => {
    getGroupList();
  });

  
  const getGroupList = () => {
    getTree().then((res: any) => {

      treeContent.value = res;

      if (res && res.length > 0 && res[0].children.length > 0) {
        id.value = res[0].children[0].id || 0

        nextTick(() => {
          treeRef.value.setCheckedKeys([id.value])
          treeRef.value.setCurrentKey(id.value)
        })
      }

      getTable();
    }).catch(() => { 
      getTable();
    })
  }

  const filterNode = (value: any, data: any) => {
    if (!value) return true;
    return data.name.indexOf(value) !== -1;
  };

  const handleNodeClick = (data: any) => {
    id.value = data.id;
    getTable();
  };
}