ElementUI中el-tree节点 实现多级只能选择最低级

<template>
    <div class="treeBody">
      <el-tree
        :data="data"
        :props="defaultProps"
        node-key="f_EnCode"
        :check-strictly="true"
        show-checkbox
        default-expand-all
        ref="tree"
        highlight-current
        @check-change="handleNodeClicks"
        :default-checked-keys="defKeys"
      ></el-tree>
  </div>
</template>
<script>

export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "f_FullName"
      },
      data: [],
      // 选择的id
      id: "",
      // 选中单选
      checkedId: "",
      defKeys: [],
      name: ""
    };
  },
  created() {
    //  选中回填
    if (this.$route.query.idNum) {
      this.defKeys[0] = this.$route.query.idNum;
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
   setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3]);
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },
    handleNodeClicks(item, node, self) {
      if (node === true) {
        this.checkedId = item.f_EnCode;
        this.name = item.f_TreeName;
        this.id = this.checkedId;
        this.$refs.tree.setCheckedKeys([item.f_EnCode]);
      } else {
        if (this.checkedId == item.f_EnCode) {
          this.$refs.tree.setCheckedKeys([item.f_EnCode]);
        }
      }
    },
    // 通过递归的形式,获取角色下所有三级权限的id,并保存到 defKeys 数组中
    getLeafKeys(node) {
      // 如果当前 node 节点不包含 children 属性,则是三级节点
      if (!node.children.length == 0) {
      // 除了最后一级所有节点disabled为true
        node.disabled = true;
      }
      node.children.forEach(item => this.getLeafKeys(item));
    },
    getData() {
      var projectTree = JSON.parse(localStorage.getItem("projectTree"));
      this.data = projectTree;
      var arr = this.data;
      arr.map(item => {
        this.getLeafKeys(item);
      });
    }
  }
};
</script>
<style lang="less" scope>
</style>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。