脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → element Select自定义显示内容

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

您可能感兴趣的文章:

相关文章

  • Vue3实现转盘抽奖效果的示例详解

    Vue3实现转盘抽奖效果的示例详解

    这篇文章主要为大家详细介绍了如何通过Vue3实现简单的转盘抽奖效果,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的可以了解一下
    2023-10-10
  • 使用Vue.$set()或者Object.assign()修改对象新增响应式属性的方法

    使用Vue.$set()或者Object.assign()修改对象新增响应式属性的方法

    vue代码中,只要在data对象里定义的对象,赋值后,任意一个属性值发生变化，视图都会实时变化，这篇文章主要介绍了使用Vue.$set()或者Object.assign()修改对象新增响应式属性,需要的朋友可以参考下
    2022-12-12
  • vue处理get/post的http请求的实例

    vue处理get/post的http请求的实例

    本文主要介绍了vue处理get/post的http请求的实例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 详解Vue结合后台的列表增删改案例

    详解Vue结合后台的列表增删改案例

    这篇文章主要介绍了详解Vue结合后台的增删改案例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue实现word，pdf文件的导出功能

    vue实现word，pdf文件的导出功能

    这篇文章给大家介绍了vue实现word或pdf文档导出的功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
    2018-07-07
  • 使用Vue逐步实现Watch属性详解

    使用Vue逐步实现Watch属性详解

    这篇文章主要介绍了使用Vue逐步实现Watch属性详解，watch对象中的value分别支持函数、数组、字符串、对象，较为常用的是函数的方式，当想要观察一个对象以及对象中的每一个属性的变化时，便会用到对象的方式
    2022-08-08
  • vue开发中遇到的问题总结

    vue开发中遇到的问题总结

    在本篇文章里小编给大家分享的是关于vue开发中遇到的问题总结，有兴趣的朋友们可以学习参考下。
    2020-04-04
  • Vue 数据绑定从 v-bind 到 v-model 的实战案例

    Vue 数据绑定从 v-bind 到 v-model 的实战案例

    本文将系统解析Vue中两种核心数据绑定方式,单向绑定 (v-bind) 和双向绑定 (v-model),通过实例讲解其工作原理、使用场景及最佳实践,帮助你真正掌握 Vue 数据驱动的精髓,感兴趣的朋友跟随小编一起看看吧
    2025-10-10
  • vue可用于拖动排序组件示例

    vue可用于拖动排序组件示例

    这篇文章主要为大家介绍了vue可用于拖动排序组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • Vue中的混入的使用(vue mixins)

    Vue中的混入的使用(vue mixins)

    这篇文章主要介绍了Vue中的混入的使用(vue mixins)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06

最新评论