elementUI——cascader级联选择器问题

问题:

  在获取数据源进行选择后,根据动态获取禁用数据进行禁用选项时,为显示数据源父级与子级添加disabled属性为true时,父级选项无法进行禁用,子级可以的问题

原因:

  cascader级联选择器没有重新渲染,导致父级再设置disabled属性时,虽然赋值成功,但是因为没有重新渲染,显示的选项仍然可以进行选取,而子级数据因为点击时进行了重新渲染,所以子级的禁用项可以禁用成功。

图一:(为想要禁用的选项设置 disabled 属性为 true )

elementUI——cascader级联选择器问题

图二:(设置完属性后,选项数据中的子级可以进行禁选,但是父级仍然可以选择)

elementUI——cascader级联选择器问题

 

 

解决办法:

  第一种:

    为cascader级联选择器添加 key 值,并在数据设置更新完成后设置key值

    <el-cascader
      :key="cascaderKey"
      :options="options"
      :props="cascaderAttribute"
    >
      <template slot-scope="{ node, data }">
        <span>{{ data.label }}</span>
        <span v-if="!node.isLeaf"> ({{ data.children.length }})</span>
      </template>
    </el-cascader>

//省略多行无关代码

    // 更新选项数据
      tempBusinessList.forEach((o) => {
        this.options.forEach((i) => {
          if (i.value === o.id) {
            i.disabled = true;
            i.children.forEach((a) => {
              a.disabled = true;
            });
          }
        });
      });

    // 设置 key 值
    this.cascaderKey = Math.random();

  

  第二种:

    其他大佬的文中还提到可以在cascader选择器添加 v-if 属性 进行true与false交替达到重新渲染的结果,但是我没试过,说是不够流畅,可自己尝试。

 

elementUI——cascader级联选择器问题

上一篇:综合架构虚拟机基础优化


下一篇:《你的顾客需要一个好故事》