el-tree获取所有子节点以及给子节点添加属性,父节点不允许点击选中

获取所有子节点数据

关键代码

var userArr=[]
            function getChildren(data){
                
                if(data && data.length>0){
                    data.forEach((item,index)=>{
                        if(item.children){
                            getChildren(item.children)
                        }else{
                            if(item.type=="student"){
                                userArr.push(item)
                            }
                        }
                    })
                }                
                return userArr;
            }

userArr全局变量，不要定义在函数里面

item.type=="student"  这里是子节点的判断条件；

调用

var treeUsers =getChildren(userData)
console.log(treeUsers)

 

 

给子节点添加属性

关键代码

function  formatTreeData(data) {
      if (data && data.length > 0) {
        data.forEach((item) => {
          if (item.children) {
            //  item.rid = item.id +randomWord(5);
            this.formatTreeData(item.children);
          } else {
            item.rid = item.id + randomWord(5);
            return;
          }
        });
      }
      return data;
    };
function randomWord(length = 32) {
      //默认32位
      //由以下元素组成
      let arr = [
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
      ];
      let num = "";
      for (let i = 0; i < length; i++) {
        num += arr[parseInt(Math.random() * arr.length)];
      }
      return num;
    }

给所有子节点添加唯一性rid属性，这是因为在工作项目中遇到相同用户信息存在不同部门中，原本后端生成的id属性不具有了唯一性，在是使用setChecked等需要用到node-key属性,它的属性值必须是唯一存在的.

也可以给他们某个节点添加不可用功能。

 

 

 

 

 父节点不允许点击选中  (rid必须是唯一的id)

<el-tree
        :data="deptuser"
        show-checkbox
        :check-strictly="true"
        :default-expand-all="false"
        node-key="rid"
        ref="tree"
        empty-text="加载中，请稍候"
        highlight-current
        @check-change="selectMeetRoomUser"
        :props="defaultProps"
      >
      </el-tree>

data方法中定义的属性

 //部门人员树
      deptuser: [],
      user: "",
      // 数据范围选项
      defaultProps: {
        children: "children",
        label: "label",
        disabled: function(data, node) {
          //带子级的节点不能选中
          if (data.children && data.children.length > 0) {
            return true;
          } else {
            return false;
          }
        }
      },

只允许选择子节点

methods中定义的方法

 selectMeetRoomUser(data, checkd, node) {
      if (checkd) {
        this.createBy = data.id;        
        this.$refs.tree.setCheckedKeys([data.rid], true);
        let user=`已选交办人员 ${data.label}`
        this.$message.success(user)
      } else {
　　　　　　　　
 this.createBy= null;

  } 
},

获取选中子节点(不包括父节点)

 

 代码结构

<template>
  <div>
    <el-button type="primary" @click="handleGetData1"
      >获取当前勾选的数据</el-button
    >
    <el-tree
      :props="propsOption"
      ref="treeRef"
      node-key="id"
      show-checkbox
      :data="treeData"
    >
    </el-tree>
  </div>
</template>

<script>
export default {
  name: "About",
  data() {
    return {
      propsOption: { label: "label", children: "children" },
      treeData: [
        {
          id: "00",
          label: "清华大学",
          children: [
            {
              id: "01",
              label: "高二一班",
              children: [
                { id: "0101", label: "齐衡" },
                { id: "0102", label: "陆春燕" },
              ],
            },
            {
              id: "02",
              label: "高二二班",
              children: [
                { id: "0201", label: "宋宁" },
                { id: "0202", label: "高飞燕" },
              ],
            },
            {
              id: "03",
              label: "高三八班",
              children: [
                { id: "0301", label: "盛明兰" },
                { id: "0302", label: "盛长柏" },
                { id: "0303", label: "王若弗" },
                { id: "0304", label: "顾廷烨" },
              ],
            },
          ],
        },
        {
          id: "04",
          label: "系统管理员",
        },
        {
          id: "05",
          label: "林噙霜",
        },
      ],
    };
  },
  methods: {
    handleGetData1() {
      let nodeArr = this.$refs.treeRef.getCheckedNodes(true);
      console.log("nodeArr", nodeArr);
    },
  },
};
</script>

<style scoped></style>

控制台输出

 关键方法: 

this.$refs.treeRef.getCheckedNodes(true);
getCheckedNodes()  若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组。
(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false

 

 

回调函数，将多层嵌套数据中满足条件的数据合计返回

 

 getLeafNode(data) {
      let nodeArr = [];
      if (data && data.children && data.children.length > 0) {
        data.children.forEach((element) => {
          if (element.children) {
            this.getLeafNode(element);
          } else {
            if (element.type == "user") {
              nodeArr.push(element);
            }
          }
        });
      } else {
        if (data.type == "user") {
          nodeArr.push(data);
        }
      }
      return nodeArr;
    },