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>

展示效果如图:

相关推荐
卡尔特斯1 天前
Android Studio 代理配置指南
android·前端·android studio
李剑一1 天前
同样做缩略图,为什么别人又快又稳?踩过无数坑后,我总结出前端缩略图实战指南
前端·vue.js
Jolyne_1 天前
Taro样式重构记录
前端
恋猫de小郭1 天前
Google 开源大模型 Gemma4 怎么选,本地跑的话需要什么条件?
前端·人工智能·ai编程
文心快码BaiduComate1 天前
Comate搭载GLM-5.1:长程8H,对齐Opus 4.6
前端·后端·架构
熊猫钓鱼>_>1 天前
AI驱动的Web应用智能化:WebMCP、WebSkills与WebAgent的融合实践
前端·人工智能·ai·skill·webagent·webmcp·webskills
毛骗导演1 天前
OpenClaw Pi Agent 深度解析:嵌入式 Agent 运行时的架构设计与实现
前端·架构
twl1 天前
从 RAG 到可持续演化的知识库:llm-wiki 介绍
前端
傻小胖1 天前
Object.defineProperty() 完整指南
开发语言·前端·javascript