element plus 级联选择器 数据更新 页面不更新

Element Plus 的级联选择器在数据更新时，需要手动触发级联选择器的更新。具体来说，你需要在数据更新后，调用级联选择器的 `clearCache` 方法来清空级联选择器的缓存，然后再次设置级联选择器的数据源，从而触发级联选择器的更新。

例如，如果你使用 Vue.js 来开发应用程序，你可以在数据更新后，使用 `$nextTick` 方法来延迟清空缓存和更新数据源，以确保级联选择器能够正确地更新。示例如下：

<template>
  <el-cascader v-model="selectedValues" :options="options"></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      selectedValues: [],
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致'
                },
                {
                  value: 'fankui',
                  label: '反馈'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    updateData() {
      // 更新数据源
      this.options[0].children[0].children.push({
        value: 'biaodan',
        label: '表单'
      })

      // 清空缓存并重新设置数据源
      this.$nextTick(() => {
        this.$refs.cascader.clearCache()
        this.$refs.cascader.initData()
      })
    }
  }
}
</script>

在上面的示例中，我们定义了一个 `updateData` 方法来更新级联选择器的数据源。在数据更新后，我们使用 `$nextTick` 方法来延迟清空缓存和更新数据源。在 `$nextTick` 回调函数中，我们调用了级联选择器的 `clearCache` 方法来清空缓存，并调用了 `initData` 方法来重新设置数据源，从而触发级联选择器的更新。同时，我们还使用了 `ref` 属性来获取级联选择器的引用，以便在方法中使用级联选择器的方法。