element中Select选择器实现自定义显示内容
作者：山为樽水为沼
在我们很多前端业务开发中,往往为了方便,都需要自定义一些用户组件,本文主要介绍了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自定义显示内容内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！