elementPlus版本升级,el-select默认值显示问题

mini_0552025-12-27 13:18

问题：

在开发过程中，升级了下elementPlus的版本，发现版本升到了2.7.4及以上后，el-select的默认值检测就会严格很多。选择框的值：value为空时，select框中显示的不是全部而是placeholder的'请选择'，但是下拉列表中全部显示又是勾选状态。

原因：

Element Plus 2.7.4 的 el-select 在 绑定的 v-model 为 null / undefined / '' 时，组件会把 placeholder（"请选择"）当成"已选值"渲染出来，看起来就像"默认值变成了请选择"，而实际上组件只是把空值当成合法选项在展示。

解决方法：

在选择框中添加**:empty-values="[null, undefined]"**。

javascript 复制代码

        <el-select
          :teleported="false"
          v-model="value"
          placeholder="请选择"
          :empty-values="[null, undefined]"
        >
          <el-option label="全部" value="" />
          <el-option label="测试数据1" value="1" />
          <el-option label="测试数据2" value="2" />
          <el-option label="测试数据3" value="3" />
          <el-option label="测试数据4" value="4" />
        </el-select>

当然，还可以全局添加。在main.ts中在注册之前随便找个位置添加就可以了。

javascript 复制代码

import ElementPlus, { ElSelect } from 'element-plus'
 ElSelect.props.emptyValues = {
   type: Array,
   default: [null, undefined],
 }

但是全局添加会有一个问题：就是选择框选项没有全部，那选择框的value为''的时候，展示的就是空，而不是placeholder了。到时候还得一个个去检查。

当然，不管是全局添加还是单个添加，如果在使用一段时间elementPlus后再升级版本，那不管是哪种方法都得一个个去检查修改，就看你更倾向于哪种方案。