element中Select选择器实现自定义显示内容
更新时间:2023年12月25日 10:52:25 作者:山为樽水为沼
在我们很多前端业务开发中,往往为了方便,都需要自定义一些用户组件,本文主要介绍了element中Select选择器实现自定义显示内容,感兴趣的可以了解一下
正常情况下,下拉框选项展示内容,就是选择后展示的label内容
如图所示:

但是要想自定义选项内容,但是展示内容不是选项label的内容,可以在el-option标签内增加div进行自定义选项label展示,但选择后结果展示仍是el-option标签内label属性绑定的值。
<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>
展示效果如图:

到此这篇关于element中Select选择器实现自定义显示内容的文章就介绍到这了,更多相关element Select自定义显示内容内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
electron dialog.showMessageBox的使用案例
Electron Dialog 模块提供了api来展示原生的系统对话框,本文主要介绍了electron dialog.showMessageBox的使用案例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
这篇文章主要介绍了vue搜索页开发实例(热门搜索,历史搜索,淘宝接口演示),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04


最新评论