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: [1000], //置灰/禁用的节点ID
                replaceFields: { //根据后端返回数据调整
                    children: 'childList',
                    title: 'orgName',
                    key: 'id'
                },
            }
        },
        mounted() {
            let that = this;
            let tree = [{
                "id": 1000,
                "orgName": "四川省",
                "orgType": "02",
                "orderNum": 1,
                "orgCode": null,
                "areaParentId": null,
                "parentOrgId": null,
                "childList": [{
                    "id": 44000,
                    "orgName": "阿坝州",
                    "orgType": "02",
                    "orderNum": 44000,
                    "orgCode": null,
                    "areaParentId": null,
                    "parentOrgId": 1000,
                    "childList": [{
                        "id": 48210,
                        "orgName": "阿坝藏族羌族自治州",
                        "orgType": "02",
                        "orderNum": 44100,
                        "orgCode": null,
                        "areaParentId": null,
                        "parentOrgId": 44000,
                        "childList": null
                    },]
                }]
            }]
            that.treeData = tree;
            that.parentId.push(that.treeData[0].id); //展开根节点
            that.setGray();
            // 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>