1. 程式人生 > 實用技巧 >ant-desgin-vue——tree自定義不可選用的置灰或禁用

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>