elementUI el-select 选择对象 value-key属性

在Vue中使用el-select组件时,如果需要选中的值为对象,通常会遇到问题。通过设置value-key属性为对象的唯一标识(如id),可以将对象作为选中值传递。在html中,设置v-model绑定test,value-key为id,并在js中通过changeValue方法打印选中值,这样就能正确处理对象类型的选中项了。


前言

提示:这里可以添加本文要记录的大概内容:

 今天遇到一个使用el-select的时候,需要获取值为对象,使用Select 组件的绑定值是一个数组,但是数组的值只能传入 Number 类型或者 String 类型的数据,如果我们想向其中传入一个对象就会出错。
怎么办呢?
我们可以发现是缺少一个索引,查看了elemnet-ui 的文档,可以看到 Select 组件有一个属性:value-key


提示:以下是本篇文章正文内容,下面案例可供参考

一、Select 的value-key的值

value-key接收一个字符串 id  为唯一值 而不是 item.id,这个id就是遍历选择下拉框数据里面那个对象的的唯一值也就是 item.id的 那个 id 就是省略了item

二、使用步骤

1.html

代码如下(示例):

<el-select 
    v-model="test" 
    value-key="id" 
    @change="changeValue">
  <el-option 
    v-for="item in arr" 
    :label="item.name" 
    :key="item.id" 
    :value="item">
  </el-option>
</el-select>

2.js

代码如下(示例):

data() {
    return {
      test: null,//不要是{},因为空对象在验证的时候是true
      arr: [
        { id: 1, name: "张三" },
        { id: 2, name: "李四" },
        { id: 3, name: "王五" }
      ]
    };
  },
  methods: {
    changeValue(value) {
      console.log("value", value);
      console.log(this.test,'thie.test')
    }
  },

 3:视图


总结

提示:这里对文章进行总结:
注:value-key接收一个字符串 id  为唯一值 而不是 item.id

VueElementUI 中,可以通过 `el-select` 提供的插槽功能来实现自定义图标。ElementUI 的 `el-select` 组件支持 `prefix` 和 `suffix` 插槽,允许开发者自定义前缀或后缀内容,包括图标[^3]。 以下是一个使用 `suffix` 插槽来自定义 `el-select` 图标的具体实现示例: ```html <template> <div> <el-select v-model="value" placeholder="请选择" class="custom-select"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" > </el-option> <!-- 使用 suffix 插槽自定义图标 --> <template #suffix> <i class="custom-icon">▾</i> <!-- 可替换为其他图标或 Unicode 字符 --> </template> </el-select> </div> </template> <script> export default { data() { return { value: '', options: [ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, { value: 'option3', label: '选项3' } ] }; } }; </script> ``` ### 样式部分 可以通过 CSS 自定义图标样式,例如颜色、大小等: ```html <style scoped> .custom-select .custom-icon { font-size: 16px; color: #409EFF; /* ElementUI 主色调 */ transform: translateY(2px); /* 微调图标垂直位置 */ } </style> ``` ### 说明: - `#suffix` 插槽用于在 `el-select` 的右侧插入自定义内容,例如图标。 - 可以使用字体图标库(如 Font Awesome)或 Unicode 字符来展示图标。 - 使用 `scoped` 样式避免影响其他组件的样式。 ### 注意事项: - 如果使用了 `scoped` 样式,可能需要使用深度选择器(如 `::v-deep` 或 `:deep()`)来覆盖 `el-select` 内部元素的样式。 - 自定义图标应保持简洁,避免视觉干扰。 通过上述方式,可以在 `el-select` 中灵活地实现自定义图标,提升 UI 一致性和用户体验。 ---
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值