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 {
  width: 260px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}