vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > element Select自定义显示内容

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自定义显示内容内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 

您可能感兴趣的文章:
阅读全文