elementui 三级级联 回显

elementui的三级级联组件提供了回显的功能，可以根据已选中的值来显示对应的选项。

要实现三级级联的回显，首先需要准备好数据源，包括三级选项的列表数据以及已选中的值。

在使用级联组件时，可以通过`:options`属性绑定列表数据，通过`v-model`绑定已选中的值。在回显时，只需要将相应的值赋给`v-model`绑定的变量即可。

假设三级级联组件的`v-model`为`value`，要回显的值为`selectedValue`。

在回显时，可以使用`$nextTick`方法来确保更新`value`后组件已经渲染完毕：

this.$nextTick(() => {
  this.value = this.selectedValue;
})

这样就可以将`selectedValue`的值回显到三级级联组件上了。

需要注意的是，回显的值必须是对应的选项数据中的值，如果`selectedValue`的值不存在于选项列表中，将无法回显成功。

以上就是使用elementui三级级联组件进行回显的方法，通过将选项值赋给`value`来实现回显效果。通过上述步骤，即可实现elementui三级级联组件的回显。

相关问题

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 绑定选中的值，然后在级联多选的模板中使用 :checked-keys.sync="checkedKeys" 来回显选中的值。具体实现可以参考 elementui 的官方文档。