element 树形控件-Tree

树形节点 实现单选

<el-tree
class="filter-tree"
:data="groupTree"
:props="defaultProps"
node-key="id"   # 关键代码
:filter-node-method="filterNode"
show-checkbox
:check-strictly="true"
ref="tree2"
@check-change="getDeptDetail"
check-on-click-node
@check="setSelectedNode"
></el-tree>

//第一种方式
//注意:组件需要添加node-key="id" 否则报错
setSelectedNode(data, obj) {
    if(obj.checkedNodes.length){
        this.$refs.tree2.setCheckedNodes([data]);
    }
},
    
//第二种方式
getDeptDetail(event, isChecked) {
    this.singleChecked(event);
},
singleChecked(event) {
    let targ = this.$refs.tree2;
    let nodes = targ.getCheckedNodes();

    if (nodes.length >= 2) {
        nodes.map((item, index) => {
            if (item.id != event.id) {
                targ.setChecked(targ.getCheckedNodes()[index], false);
            }
        });
    }
}   

一键清空树形节点

 getAllList() {
     this.$refs.tree2.setCheckedKeys([]);
 },

对树形节点进行搜索筛选

<el-input
  placeholder="输入关键字进行过滤"
  v-model="filterText">
</el-input>

<el-tree
  class="filter-tree"
  :data="data"
  :props="defaultProps"
  default-expand-all
  :filter-node-method="filterNode"
  ref="tree">
</el-tree>

watch: {
    filterText(val) {//监听输入框值变化
        this.$refs.tree.filter(val);
    }
},
    
methods: {
    filterNode(value, data) {
        if (!value) return true;
        //注意这里的.name可以换 具体根据筛选什么来决定 名字就.name
        return data.name.indexOf(value) !== -1;
    }
},

实现第一级别不显示选择框并无法选择

<script>
/第一步  获取到后台的数据 给第一级的数据添加选择框禁用
this.$axios.get("admin/department/getDeptByType").then(({ data }) => {
    data.forEach(item => {
        item.disabled = "disabled";
    });
    this.groupTree = data;
});
</script>

<style>
/*第二步 因为加了禁用后 element会给其添加一个is-disabled类 
所以可以根据这个类名让选择框隐藏*/
/deep/ .el-checkbox__input.is-disabled {
  display: none;
}
</style>

实现回显数据，并且修改选中状态样式

实现效果：

*上下2个树型组件，默认进来回填数据，并让选中数据红色字体显示

只允许单选，点击切换

<template>
 <el-tree
     :default-checked-keys="[temporary]" # 回填
     show-checkbox  # 显示勾选框
     ref="tree"
     :data="treeData"
     @check="setSelectedNode"
     check-on-click-node # 点击任意位置选中
     node-key="id"
></el-tree>
<el-tree
     :default-checked-keys="[temporary]"
     show-checkbox
     ref="tree2"
     :data="treeData"
     :props="defaultProps"
     @check="setSelectedNode"
     check-on-click-node
     :filter-node-method="filterNode"
     node-key="id"
></el-tree>
</template>

export default {
    data() {
        temporary: ""
    },
    created() {
    this.temporary = this.$route.query.student_id; //上个页面带来的数据进行回填操作
    },
    methods：{
     setSelectedNode(data, obj) {
      this.$refs.tree.setCheckedNodes([]);
      this.$refs.tree2.setCheckedNodes([]);
      this.temporary = "";
      if (obj.checkedNodes.length) {
        this.$refs.tree.setCheckedNodes([data]);
        this.$refs.tree2.setCheckedNodes([data]);
      }
    },
   }
     
}

/deep/ .el-tree-node__content > label.el-checkbox {
  display: none;
}
/deep/ .is-checked .el-tree-node__label {
  color: red;
}
/deep/ .is-checked .custom-tree-node span {
  color: red;
}

Tree组件实现自定义节点样式

<el-tree
      :default-checked-keys="[1]"
      show-checkbox
      ref="tree"
      :data="treeData"
      @check="setSelectedNode"
      check-on-click-node
      node-key="id"
      :render-content="renderContent"
></el-tree>

//data为节点数据
renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.append(data)}
            >
              Append
            </el-button>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.remove(node, data)}
            >
              Delete
            </el-button>
          </span>
        </span>
      );
}

/deep/ .custom-tree-node {
   260px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}