【Element】el-tree 树形控件

目录

ElementUI

公共参数

基础用法

最后一层不可选择

思路一：第三层设置disable

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

最后一层展示复选框

节点筛选

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

checkbox被触发两次

ElementPlus

默认选中第一个

---

转载请注明：宾果的救星的博客_CSDN博客

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  节点发生变化

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

最后一层不可选择

思路一：第三层设置disable

单纯设置disabled无法选中。

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.复选框改变的事件

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 的节点

最后一层展示复选框

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的选框了。

节点筛选

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

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;
},

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

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

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

改为

---

ElementPlus

默认选中第一个

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();
  };
}