vue el-tree获取到数据递归获取flag 判断是否选中

1.html

<el-tree
      :data="types" //遍历的数据集合
      ref="tree"  //ref的引用是相当于一个DOM节点
      show-checkbox
      node-key="typeId" //通过哪个字段来遍历
      :props="defaultProps" //绑定data的defaultProps,里面设置的是显示的字段和遍历的子节点集合
      :default-checked-keys="arr" //类型:数组;根据数组来默认选中框;引用的是node-key的数据,例[1,3,8]就是默认选中typeId为1,3,8的数据
    >
    </el-tree>

2.js

data() {
    return {
      defaultProps: {
        children: "childrenList",//设置子节点集合
        label: "typeName",//显示的标题
      },
      types: [],//数据list集合
      arr: [],//用来存放选中的节点
    };
  },

methods: {
    /** 勾选的节点 */
    checkTheNode(val) {//参数就是递归集合
      //获取传进来的
      if (val.length !== 0) {
        val.forEach((item) => {
          //直接循环
          if (item.flag == true) {
            //判断当前树是否被选中 选中的话就push到 全局变量 arr 里面
            this.arr.push(item.typeId); //把id push到里面
          }
          if (item.childrenList != null) {
            //这里是判断下级是否还有数据 下级数据是用 children 包起来的
            this.checkTheNode(item.childrenList);
          }
        });
        //循环以后直接选中 el-tree
        this.$refs.tree.setCheckedKeys(this.arr);
      }
    },
}

效果