elementui 级联选择器数据动态更新后 不回显

如果 ElementUI 级联选择器数据动态更新后不回显，可能是因为更新后的数据没有被正确设置为级联选择器的值。

你可以尝试在更新数据后，手动将更新后的数据设置为级联选择器的值。例如，假设你的级联选择器的 v-model 绑定的数据是 `selectedOptions`，那么你可以在更新数据后，将更新后的数据设置为 `selectedOptions` 的值：

// 假设更新后的数据是新的选项列表 newOptions
this.options = newOptions;

// 手动设置级联选择器的值为更新后的数据
this.selectedOptions = newOptions;

如果以上方法仍然无法解决问题，你可以尝试调用级联选择器的 `clearChecked()` 方法来清空已选中的选项，然后再将更新后的数据设置为级联选择器的值：

// 假设更新后的数据是新的选项列表 newOptions
this.options = newOptions;

// 清空已选中的选项
this.$refs.cascader.clearChecked();

// 手动设置级联选择器的值为更新后的数据
this.selectedOptions = newOptions;

希望以上方法能够解决你的问题。

相关问题

Elementui 级联选择器回显数据

要实现级联选择器的回显数据，需要在组件中绑定一个数组作为 v-model，然后在父组件中对该数组进行赋值即可实现回显。

具体实现步骤如下：

1. 在父组件中定义一个数组，用于存储级联选择器的选中值，如下所示：

<template>
  <div>
    <el-cascader
      :options="options"
      v-model="selectedValues"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValues: [], // 存储级联选择器的选中值
      options: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'haidian',
              label: '海淀区',
            },
            {
              value: 'dongcheng',
              label: '东城区',
            },
          ],
        },
        {
          value: 'shanghai',
          label: '上海',
          children: [
            {
              value: 'pudong',
              label: '浦东新区',
            },
            {
              value: 'baoshan',
              label: '宝山区',
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>

2. 在父组件中获取回显数据，并将其赋值给 selectedValues 数组，如下所示：

<template>
  <div>
    <el-cascader
      :options="options"
      v-model="selectedValues"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValues: [], // 存储级联选择器的选中值
      options: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'haidian',
              label: '海淀区',
            },
            {
              value: 'dongcheng',
              label: '东城区',
            },
          ],
        },
        {
          value: 'shanghai',
          label: '上海',
          children: [
            {
              value: 'pudong',
              label: '浦东新区',
            },
            {
              value: 'baoshan',
              label: '宝山区',
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
  },
  mounted() {
    // 模拟获取回显数据
    const data = {
      province: 'beijing',
      city: 'haidian',
    };

    // 将回显数据赋值给 selectedValues 数组
    this.selectedValues = [data.province, data.city];
  },
};
</script>

3. 当 selectedValues 数组的值发生变化时，级联选择器的选中值也会随之更新，因此我们可以在 handleChange 方法中获取最新的选中值，如下所示：

<template>
  <div>
    <el-cascader
      :options="options"
      v-model="selectedValues"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValues: [], // 存储级联选择器的选中值
      options: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'haidian',
              label: '海淀区',
            },
            {
              value: 'dongcheng',
              label: '东城区',
            },
          ],
        },
        {
          value: 'shanghai',
          label: '上海',
          children: [
            {
              value: 'pudong',
              label: '浦东新区',
            },
            {
              value: 'baoshan',
              label: '宝山区',
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
  },
  mounted() {
    // 模拟获取回显数据
    const data = {
      province: 'beijing',
      city: 'haidian',
    };

    // 将回显数据赋值给 selectedValues 数组
    this.selectedValues = [data.province, data.city];
  },
};
</script>

这样，当父组件渲染完毕时，级联选择器的选中值就会自动回显。

elementui级联选择器多选回显

ElementUI级联选择器的多选回显可以通过v-model绑定一个数组来实现。当用户选择多个选项时，这些选项的值会被添加到数组中。当需要回显已选择的选项时，只需要将这些选项的值传递给v-model所绑定的数组即可。例如：

<el-cascader
  v-model="selectedOptions"
  :options="options"
  :props="props"
  multiple
  filterable
  clearable
  @change="handleChange"
>
</el-cascader>

其中，selectedOptions是一个数组，用于存储已选择的选项的值。multiple属性表示开启多选模式，filterable属性表示开启搜索功能，clearable属性表示开启清空已选择选项的功能。在@change事件中，可以监听选项的变化并更新selectedOptions数组。

如果需要在级联选择器中显示已选择的选项，可以使用v-for指令遍历selectedOptions数组，并将每个选项的值传递给级联选择器的value属性。例如：

<el-cascader
  :value="selectedOptions"
  :options="options"
  :props="props"
  multiple
  filterable
  clearable
  @change="handleChange"
>
</el-cascader>

这样，已选择的选项就会在级联选择器中显示出来。