Vue+ElementUI 中级联选择器Bug问题的解决

下面是详细的讲解“Vue+ElementUI 中级联选择器Bug问题的解决”的攻略：

问题描述

在使用Vue+ElementUI的级联选择器时，如果选中一个子级，父级的选择器就会被清空。

Bug分析

原因是因为使用Vue时，子组件变更会逐级向上传递，会触发父组件的更新，导致父组件的数据被清空。

解决方案

在使用级联选择器时，我们需要在父组件设置子组件的值时，使用deep选项将对象设置为响应式的，避免在子组件改变值时，引起父组件的更新。

例如，我们定义了两个级联选择器province和city，在province的change事件中设置city的值，此时，我们需要这样设置：

// 父组件
<template>
  <div>
    <el-cascader @change="handleChange" :options="options" v-model="value" />
    <el-cascader :options="city" v-model="cityValue" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [],
      value: [],
      city: [],
      cityValue: []
    };
  },
  mounted() {
    this.loadProvince();
  },
  methods: {
    loadProvince() {
      // 加载省份数据
    },
    handleChange(e) {
      // 子组件改变时，使用deep选项将对象设置为响应式的
      this.$set(this, "cityValue", []);
      this.$set(this, "city", []);
      const option = this.options.find(o => o.value === e[0]);
      if (option.children) {
        this.$set(this.city, 0, option.children);
      }
    }
  }
};
</script>

以上代码中，我们使用this.$set方法，将cityValue和city设置为响应式的对象，在handleChange事件中根据省份获取城市数据时，更新city的值，并在点击清空时，清空cityValue的值。

示例说明

下面我们来演示一下在Vue+ElementUI中的级联选择器中出现的Bug，以及使用上文提到的解决方案后的表现。

例子中，我们先选取省级单位的数据，将会加载该省的市级数据，再选取该省下的某个市级单位，最后清空省级单位，查看结果：

<template>
  <div>
    <el-cascader @change="handleChange" :options="options" v-model="value" />
    <el-cascader :options="city" v-model="cityValue" />
    <el-button @click="clearValue">清空</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [],
      value: [],
      city: [],
      cityValue: []
    };
  },
  mounted() {
    this.loadProvince();
  },
  methods: {
    loadProvince() {
      // 模拟省份数据
      this.options = [
        {
          label: "湖南省",
          value: 1,
          children: [
            { label: "长沙市", value: 11 },
            { label: "株洲市", value: 12 }
          ]
        },
        {
          label: "广东省",
          value: 2,
          children: [{ label: "广州市", value: 21 }]
        }
      ];
    },
    handleChange(e) {
      // 将cityValue和city设置为响应式的
      this.$set(this, "cityValue", []);
      this.$set(this, "city", []);
      const option = this.options.find(o => o.value === e[0]);
      if (option.children) {
        this.$set(this.city, 0, option.children);
      }
    },
    clearValue() {
      // 清空级联选择器的值，将value、cityValue和city设置为响应式的
      this.$set(this, "value", []);
      this.$set(this, "cityValue", []);
      this.$set(this, "city", []);
    }
  }
};
</script>

在上述代码中，我们在handleChange事件中使用了前面所述的解决方案，在选中省份时，更新城市数据时，使用this.$set方法将城市数据设置为响应式的。并且，在clearValue事件中，我们也使用$set方法来清空级联选择器的值。