ant-desgin-vue——tree自定义不可选用的置灰或禁用

vue:

<template>
  <div class="tree">
    <a-tree showIcon v-if="treeData.length" checkable :treeData="treeData" v-model="checkedId"
            :defaultExpandedKeys="parentId"
            @select="this.onSelect" :replaceFields="replaceFields" checkStrictly
            @check="this.onCheck">
    </a-tree>
  </div>
</template>

<script>
  export default {
    name: "tree",
    data() {
      return {
        treeData: [],
        parentId: [],//根节点
        checkedId: [], //选中节点ID
        treeDisabledArr: [], //置灰/禁用的节点ID
        replaceFields: { //根据后端返回数据调整
          children: 'childList',
          title: 'orgName',
          key: 'id'
        },
      }
    },
    mounted() {
      this.getOrgTree();//获取树
    },
    methods: {
      getOrgTree() {
        let that = this;
        that.$get('***', '',).then((res) => {  //这里是封装的axios方法
          if (res.code == 1) {
            that.treeData = res.data;
            that.parentId.push(that.treeData[0].id); //展开根节点
            that.setGray();
            // that.setDisabled();
          } else {
            that.$message.error(res.message);
          }
        }).catch((err) => {

        })
      },
      //置灰
      setGray() {
        let that = this,
          list = [...that.treeData];
        let getIds = function (list) {
          list.forEach(k => {
            if (k.childList && k.childList.length > 0) {
              that.treeDisabledArr.forEach(e => {
                if (e == k.id) {
                  k.class = 'gray';
                }
              })
              getIds(k.childList)
            } else {
              that.treeDisabledArr.forEach(e => {
                if (e == k.id) {
                  k.class = 'gray';
                }
              })
            }
          })
        }
        getIds(list);
        that.treeData = [...list];
      },
      //禁用
      setDisabled() {
        let that = this,
          list = [...that.treeData];
        let getIds = function (list) {
          list.forEach(k => {
            if (k.childList && k.childList.length > 0) {
              that.treeDisabledArr.forEach(e => {
                if (e == k.id) {
                  k.disabled = true;
                }
              })
              getIds(k.childList)
            } else {
              that.treeDisabledArr.forEach(e => {
                if (e == k.id) {
                  k.disabled = true;
                }
              })
            }
          })
        }
        getIds(list);
        that.treeData = [...list];
      },
      onSelect(selectedKeys, info) { //点击名字时触发

      },
      onCheck(selectedKeys, info) { //点击复选框时触发

      },
    }
  }
</script>

<style scoped>
  .tree /deep/ .ant-tree li.gray > span.ant-tree-node-content-wrapper {
    color: rgba(0, 0, 0, 0.25);
  }
</style>

标签：vue,自定义,treeData,tree,list,childList,getIds,forEach,id
来源： https://www.cnblogs.com/linjiangxian/p/13501208.html