ElementPlus 下拉框编辑时 数据回显

在 ElementPlus 中，要实现下拉框编辑时数据的回显，你可以通过以下步骤进行操作：

1. 首先，确保你已经引入了 ElementPlus 组件库，并按需引入了下拉框组件。

2. 在你需要编辑的表单中，使用 `el-select` 组件作为下拉框的容器，并设置 `v-model` 绑定一个数据变量，用于存储选中的值。

<template>
  <el-select v-model="selectedValue" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '', // 存储选中的值
      options: [ // 下拉框的选项数据
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ]
    };
  }
};
</script>

3. 当你需要编辑时，将要回显的值赋给 `selectedValue` 变量即可，它会自动将对应的选项显示在下拉框中。

<template>
  <!-- 编辑表单 -->
  <el-form :model="form">
    <el-form-item label="下拉框">
      <el-select v-model="form.selectedValue" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        selectedValue: 'option2', // 回显的值
      },
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ]
    };
  },
  mounted() {
    // 在 mounted 钩子中模拟从后端获取数据，然后赋给 form.selectedValue
    setTimeout(() => {
      this.form.selectedValue = 'option3'; // 假设从后端获取的值是 'option3'
    }, 1000);
  }
};
</script>

这样，当你编辑表单时，下拉框会自动显示对应的选项。你可以将回显的值从后端获取，赋给 `selectedValue` 变量即可。