el-cascader动态禁用选项

首先是选择器

                      <el-cascader
                        ref="refNewAssetID"
                        style="width: 100%"
                        :show-all-levels="false"
                        placeholder="请选择设备名称"
                        v-model="addForm.newAssetID"
                        :options="newplaces"
                        :props="{
                          checkStrictly: true,
                          label: 'devName',
                          value: 'devCatalog',
                          emitPath: false,
                        }"
                        clearable
                        filterable
                        @change="newstoreChange"
                      ></el-cascader>

checkStrictly设置为true，确保能选择任意层级，接下来是数据处理。

默认情况下禁用选项是disabled，可以后端返回数据时就给你动态禁用，也可前端自己来处理。

以下是处理方法

 1 /**
 2  * 遍历树节点，使用自定义规则，定义该选项是否禁用
 3  * @param {*} arr 节点数组
 4  * @param {*} nodeKey 需要对比的节点内容
 5  * @param {*} rule 自定义规则函数，返回值为当前节点内容是否符合规则的Boolean值
 6  */
 7 export function disableTreeNode(arr, nodeKey, rule) {
 8   arr.forEach(item => {
 9     if (item?.children?.length) {
10       //如果存在子节点，则递归调用
11       disableTreeNode(item.children, nodeKey, rule)
12     }
13     item.disabled = rule(item[nodeKey])
14   })
15 }

处理数据时。

1 request(...).then(res=>{
2     this.newplaces = [...res]
3     disableTreeNode(this.newplaces, 'devType', value => value !== 1)
4 })

从后端获取到数据后，调用该方法即可。像是这里我的方法是devType这个字段数据若是不为1则禁用选项

 

posted @ 2025-06-06 17:32  RicardoX3  阅读(225)  评论(0)    收藏  举报