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>

展示效果如图:

相关推荐
hunterandroid9 分钟前
多线程与线程池:从 Thread 到高效并发
前端
用户693717500138440 分钟前
AI Agent 里的 Loop 到底是什么?
android·前端·后端
hunterandroid1 小时前
内存泄漏与 LeakCanary:从问题定位到修复思路
前端
用户94688315057501 小时前
四、elpis 基于 vue3 完成动态组件库建设
前端
用户298698530141 小时前
如何在 JavaScript 和 React 中下载/导出 Excel 文件
前端·javascript·react.js
anyup1 小时前
uView Pro 正式支持 MCP 协议!让 AI 秒懂你的组件库
前端·uni-app·ai编程
Coffeeee1 小时前
从 Android 15 到 Android 17,谷歌猝不及防的音频改动
android·前端·google
雪隐2 小时前
用Flutter做背单词APP-00前言
前端·人工智能·后端
何时梦醒2 小时前
前端存储全攻略 & JavaScript this 绑定完全指南
前端·javascript·面试
前端百草阁2 小时前
JavaScript 设计模式(23 种)
开发语言·前端·javascript·设计模式