element-ui Cascader 级联选择器多级禁用

小乐乐乐乐乐子

已于 2023-11-02 15:18:16 修改

阅读量568

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-11-02 15:12:39 首次发布

本文链接：https://blog.csdn.net/weixin_70955790/article/details/134183105

版权

<template>
    <div>
      <el-cascader 
      ref="cascader" 
      v-model="checked" 
      :options="options" 
      :props="props"
      clearable
      @change="handleChange" />
    </div>
</template>

<script>
export default {
    data() {
        return {
            props: {
                multiple: true,
                emitPath: false
            },
            checked: [],
            options: [{
                value: 1,
                label: '东南',
                disabled: false,
                children: [{
                    value: 2,
                    label: '上海',
                    disabled: false,
                    children: [
                        {
                            value: 3,
                            label: '普陀',
                            disabled: false
                        },
                        {
                            value: 4,
                            label: '黄埔',
                            disabled: false
                        },
                        {
                            value: 5,
                            label: '徐汇',
                            disabled: false
                        }
                    ]
                }, {
                    value: 7,
                    label: '江苏',
                    disabled: false,
                    children: [
                        {
                            value: 8,
                            label: '南京',
                            disabled: false
                        },
                        {
                            value: 9,
                            label: '苏州',
                            disabled: false
                        },
                        {
                            value: 10,
                            label: '无锡',
                            disabled: false
                        }
                    ]
                }, {
                    value: 12,
                    label: '浙江',
                    disabled: false,
                    children: [
                        {
                            value: 13,
                            label: '杭州',
                            disabled: false
                        },
                        {
                            value: 14,
                            label: '宁波',
                            disabled: false
                        },
                        {
                            value: 15,
                            label: '嘉兴',
                            disabled: false
                        }
                    ]
                }]
            }, {
                value: 17,
                label: '西北',
                disabled: false,
                children: [{
                    value: 18,
                    label: '陕西',
                    disabled: false,
                    children: [
                        {
                            value: 19,
                            label: '西安',
                            disabled: false
                        },
                        {
                            value: 20,
                            label: '延安',
                            disabled: false
                        }
                    ]
                }, {
                    value: 21,
                    label: '新疆维吾尔族自治区',
                    disabled: false,
                    children: [
                        {
                            value: 22,
                            label: '乌鲁木齐',
                            disabled: false
                        },
                        {
                            value: 23,
                            label: '克拉玛依',
                            disabled: false
                        }
                    ]
                }]
            }]
        }
    },
    methods: {
        handleChange() {
            setTimeout(() => {
                let nodePach = [], _that = this
                try {
                    _that.$refs.cascader.checkedNodes.map(item => {
                        nodePach.push(...item.path)
                    })
                    this.options.forEach(item => {
                        item.children = this.disabledData(item.children, nodePach, item.value)
                    })
                } catch (e) {

                }
            }, 10)
        },
        disabledData(data, nodePach, parentId) {
            return data.map(item => {
                if (item.children != null && item.children.length > 0) {
                    item.children = this.disabledData(item.children, nodePach, parentId)
                }
                if (nodePach.length > 0 && nodePach.indexOf(item.value) === -1 && nodePach.indexOf(parentId) !== -1) {
                    item.disabled = true
                } else {
                    item.disabled = false
                }
                return item
            })
        }
    }
}
</script>