elementUI——cascader级联选择器问题

问题：

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

原因：

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

图一：（为想要禁用的选项设置 disabled 属性为 true ）

图二：（设置完属性后，选项数据中的子级可以进行禁选，但是父级仍然可以选择）

 

 

解决办法：

　　第一种：

　　　　为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交替达到重新渲染的结果，但是我没试过，说是不够流畅，可自己尝试。