element ui中Select 选择器,自定义显示内容

正常情况下,下拉框选项展示内容,就是选择后展示的label内容

如图所示:

但是要想自定义选项内容,但是展示内容不是选项label的内容,可以在el-option标签内增加div进行自定义选项label展示,但选择后结果展示仍是el-option标签内label属性绑定的值。

html 复制代码
<el-select
   v-model="stat"
   clearable
   placeholder="">
     <el-option
        v-for="item in list"
        :key="item.id"
        :value="item.id"
        :label="item.name">
        <div>{{ item.typeName + '-' + item.name}}</div>
    </el-option>
 </el-select>

展示效果如图:

相关推荐
三年三月2 小时前
自建HTTPS证书
前端·javascript
木易士心3 小时前
如何优化v-if和v-for的性能?
前端·javascript
三年三月3 小时前
浏览器地址栏回车 vs 点击刷新按钮的缓存行为差异分析
前端·javascript
码农刚子3 小时前
ASP.NET Core Blazor 核心功能一:Blazor依赖注入与状态管理指南
前端·后端
胖虎2653 小时前
基于Vue3+xgplayer 移动端直播解决方案
前端
用户4099322502123 小时前
Vue 3模板如何通过编译三阶段实现从声明式语法到高效渲染的跨越
前端·ai编程·trae
小左OvO3 小时前
基于百度地图JSAPI Three的城市公交客流可视化(二)——区域客流
前端·javascript·vue.js
小左OvO3 小时前
基于百度地图JSAPI Three的城市公交客流可视化(三)——实时公交
前端·javascript·vue.js
IT_陈寒4 小时前
Vite 5新特性解析:10个提速技巧让你的开发效率翻倍 🚀
前端·人工智能·后端
焦糖小布丁4 小时前
通配符证书能给几个网站用?
前端