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>

展示效果如图:

相关推荐
yuki_uix16 分钟前
深入理解 JavaScript 的 this:从困惑到掌握的完整指南
前端·javascript
小贤哥17 分钟前
死磕这几道js手写题
前端·程序员
Lee川18 分钟前
🌐 深入 Chrome 浏览器:从单线程到多进程架构的进化之路
前端·架构·前端框架
学以智用21 分钟前
Vue 3 项目核心配置文件详解
前端·vue.js
工边页字23 分钟前
AI 开发必懂:Context Window(上下文窗口)到底是什么?
前端·人工智能·后端
Mr_Swilder25 分钟前
intel显卡本地部署大模型
前端
yuki_uix25 分钟前
Promise 与 async/await:从回调地狱到优雅异步的演进之路
前端·javascript
over69729 分钟前
📸《拍照记单词》—— 从零到上线的完整开发指南(超详细版)
前端·人工智能·产品
毛骗导演30 分钟前
万字解析 OpenClaw 源码架构-架构概览
前端·架构
天才熊猫君38 分钟前
Flex布局深度解析:为什么我的Flex项目不按预期收缩?
前端