在使用Element-plus 使，两个 el-select 的选项错乱，应该如何解决它

Question

在使用Element-plus 使，两个 el-select 的选项错乱

1. 项目依赖项：

   "element-plus": "^2.3.14",
   "nuxt": "^3.7.0",
   

2. bug截图（分别是选中了第一个和第二个下拉框）

1. 代码片段

   因为无法直接放置 .vue代码，所以把template部分放到了html中，script部分放到了最下方的typescript中

<!-- template部分 -->
        <el-form :model="formData" ref="formRef">
          <el-form-item label="企业性质" prop="companyType">
            <el-select v-model="formData.companyType" placeholder="请选择企业性质">
              <el-option v-for="item in companyType" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公司属性" prop="companyAttribute">
            <el-select v-model="formData.companyAttribute" placeholder="请选择公司属性">
              <el-option v-for="item in companyAttribute" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

// script部分
import { ElForm, ElFormItem,  ElSelect, ElOption, ElCheckbox } from 'element-plus';

const formData = ref({
  companyType: '',
  companyAttribute: ''
});

const companyType = ref([
  {
    label: '国有企业',
    value: '1'
  },
  {
    label: '私营企业',
    value: '2'
  },
  {
    label: '合资企业',
    value: '3'
  },
  {
    label: '外资企业',
    value: '4'
  },
  {
    label: '其他',
    value: '5'
  }
]);

const companyAttribute = ref([
  {
    label: '制造商',
    value: '1'
  },
  {
    label: '贸易商',
    value: '2'
  },
  {
    label: '服务商',
    value: '3'
  },
  {
    label: '其他',
    value: '4'
  }
]);

Answer 1

下午好🌅🌅🌅
本答案参考通义千问

在使用 Element-plus 的 el-select 组件时，如果出现两个下拉框的选项错乱问题（例如选中了第一个下拉框后，第二个下拉框的值被错误地更新），可能是由于以下原因导致：

---

✅ 问题分析

1. 数据绑定错误：v-model 没有正确绑定到 formData 中对应的字段。
2. 数据源重复或混乱：companyType 和 companyAttribute 数据源可能没有正确区分。
3. 组件未正确引入：在 Nuxt 3 中如果没有正确注册 Element-plus 的组件，可能导致渲染异常。

---

🔍 解决方案

1. 确保 v-model 正确绑定到 formData 中的字段

检查 v-model="formData.companyType" 和 v-model="formData.companyAttribute" 是否与 formData 中的字段完全一致。

<el-select v-model="formData.companyType" placeholder="请选择企业性质">

<el-select v-model="formData.companyAttribute" placeholder="请选择公司属性">

重点：确保 v-model 绑定的是 formData 中的字段，而不是直接绑定到 companyType 或 companyAttribute 数组。

---

2. 确认 companyType 和 companyAttribute 是响应式变量

你已经使用了 ref 定义了 companyType 和 companyAttribute，这是正确的做法。

const companyType = ref([...]);
const companyAttribute = ref([...]);

重点：确保这些数组是响应式的，以便在模板中能正常渲染。

---

3. 检查组件是否正确导入和注册

在 Nuxt 3 中，如果你没有全局注册 Element-plus 的组件，你需要在组件中显式导入它们。

import { ElForm, ElFormItem, ElSelect, ElOption } from 'element-plus';

重点：确保所有需要用到的组件都已导入并使用。

---

4. 确保 key 唯一且合理

在 v-for 中，key 应该是唯一的、稳定的标识符。当前代码中使用的是 item.value，这通常是可以接受的。

<el-option v-for="item in companyType" :key="item.value" ...>

重点：确保每个 el-option 的 key 是唯一的，避免 Vue 渲染出现问题。

---

5. 检查是否有其他逻辑干扰

比如，是否存在 watch 或 computed 监听 formData，并修改了 companyType 或 companyAttribute 的值？

---

🛠️ 修改后的完整代码示例

✅ HTML (Template 部分)

<template>
  <el-form :model="formData" ref="formRef">
    <el-form-item label="企业性质" prop="companyType">
      <el-select v-model="formData.companyType" placeholder="请选择企业性质">
        <el-option
          v-for="item in companyType"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="公司属性" prop="companyAttribute">
      <el-select v-model="formData.companyAttribute" placeholder="请选择公司属性">
        <el-option
          v-for="item in companyAttribute"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

✅ TypeScript (Script 部分)

<script setup lang="ts">
import { ref } from 'vue';
import { ElForm, ElFormItem, ElSelect, ElOption } from 'element-plus';

const formData = ref({
  companyType: '',
  companyAttribute: ''
});

const companyType = ref([
  {
    label: '国有企业',
    value: '1'
  },
  {
    label: '私营企业',
    value: '2'
  },
  {
    label: '合资企业',
    value: '3'
  },
  {
    label: '外资企业',
    value: '4'
  },
  {
    label: '其他',
    value: '5'
  }
]);

const companyAttribute = ref([
  {
    label: '制造商',
    value: '1'
  },
  {
    label: '贸易商',
    value: '2'
  },
  {
    label: '服务商',
    value: '3'
  },
  {
    label: '其他',
    value: '4'
  }
]);
</script>

---

🧪 测试建议

• 在浏览器中打开页面，分别选择第一个和第二个下拉框，观察 formData 中的值是否正确更新。
• 使用 Vue DevTools 查看 formData 的值是否符合预期。

---

📌 总结

| 问题 | 解决方法 | |------|----------| | v-model 绑定错误 | 确保绑定到 formData 中的字段 | | 数据源未响应式 | 使用 ref 包装数据源 | | 组件未正确导入 | 显式导入 Element-plus 的组件 | | key 不唯一 | 确保 key 唯一且稳定 |

---

如仍有问题，请提供更详细的报错信息或截图，我可以进一步帮助定位问题。