Element UI 级联动态加载，编辑时回显完美解决！

前端

2023-09-16 16:25:29

Element UI 级联动态加载，编辑时回显问题完美解决

什么是级联选择器？

在软件开发中，级联选择器是一种交互式界面元素，允许用户从一系列嵌套选项中选择值。在 Element UI 框架中，el-cascader 组件提供了级联选择器的实现，广泛用于省市区联动选择等场景。

问题：动态加载和编辑回显

在使用 Element UI 级联选择器时，我们经常会遇到两个挑战：

动态加载： 后端返回的数据需要转换为符合级联选择器要求的格式。
编辑回显： 在编辑页面时，如何将后端返回的数据回显到级联选择器中。

解决方案：分步解析

第一步：后端数据处理

后端返回的数据通常是一个 JSON 对象，包含省市区信息。我们需要将其转换为符合 Element UI 级联选择器要求的格式，即嵌套数组结构。

第二步：父组件调用子组件方法

在父组件中，我们通过调用子组件 setAreaShow 方法来设置级联选择器的值。

第三步：子组件实现 setAreaShow 方法

在子组件中，我们需要实现 setAreaShow 方法，将父组件传来的值转换为级联选择器可识别的值，并设置其显示。

完整代码示例

父组件代码：

<template>
  <el-cascader ref="area" v-model="area" :options="cascaderData" @change="handleChange"></el-cascader>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const area = ref([]);

    const handleChange = (value) => {
      this.$refs.area.setAreaShow(value);
    };

    return {
      area,
      handleChange,
    };
  },
};
</script>

子组件代码：

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

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const value = ref([]);

    onMounted(() => {
      const parentArea = this.$parent.area;
      const cascaderValue = parentArea.map((item) => item.value);
      this.$refs.cascader.setAreaShow(cascaderValue);
    });

    return {
      value,
    };
  },
};
</script>