树形组件的使用小结

<el-tree
      :data="tabledata"
      show-checkbox
      node-key="id"
      ref="tree"
      highlight-current
      :props="defaultProps"
      :default-checked-keys="selectList"
      @check="handleCheckChange"
      :check-strictly="isChecked"
      class="mt-2"
    >
    //isChecked初始化为false父子节点联动
    //default-checked-keys赋值后端返回来的选中数组，配合node-key使用
    //check选中事件
    </el-tree>

js部分代码：

 methods: {
    getList(id) {
      this.$axios.rolepermList({ role_id: id }).then((res) => {
        if (res.data.code == 200) {
          this.tabledata = res.data.data.list;
          this.isChecked = true //取消父子节点联动

          this.$nextTick(()=>{
            this.selectList= res.data.data.selected;
            this.isChecked = false//将选中的节点赋值之后再将父子节点联动，才可全选和取消全选
          })
        }
      });
    },
    handleCheckChange() {
      let list = this.$refs.tree.getCheckedKeys();//获取选中的节点
      let half = this.$refs.tree.getHalfCheckedKeys();//获取半选中的节点
      let obj = {
        role_id: this.id,
        selected: list.concat(half)//合并两个数组
      };
      this.$axios
        .saveRoleperm(obj)
        .then((res) => {
          // console.log("selected????", res);
          if (res.data.code == 200) {
            this.$message.success(res.data.message);
          }
        });
    },