热门标签
热门文章
- 110分钟设置免费远程桌面_免费 远程桌面
- 2Quartz集群调度出现的WARN警告问题_clustermanager: detected 1 failed or restarted ins
- 3Uipath学习(3):Uipath工作流
- 4全文索引详解（基于InnoDB引擎）
- 5区间预测 | MATLAB实现ARIMA时间序列预测_matlab arima
- 6OpenAI发布Sora技术报告深度解读！真的太强了！
- 7kali Linux 2020中文汉化，一次成功！_kali linux汉化教程
- 8JS第一天 之 走进JS_javascript 曾用名
- 9element-UI_studyrecords_el-form-item prop属性
- 10数据结构-排序_void shellsort(int arr[],int n) { int gap=n/2; whi
当前位置: article > 正文
el-select的el-option选择器：实现选项内容自定义两行_el-select多行显示
作者：羊村懒王 | 2024-02-18 10:14:28
赞
踩
el-select多行显示
效果图：
- <script src="//unpkg.com/vue/dist/vue.js"></script>
- <script src="//unpkg.com/element-ui@2.15.6/lib/index.js"></script>
- <div id="app">
- <template>
- <el-select v-model="value" placeholder="请选择">
- <el-option
- v-for="item in cities"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- //内容两行显示
- <span style="float: left; font-size: 10px;margin-top:-6px;">{{ item.label }}</span>
- <span style="float: left;display:block;position:absolute;margin-top:5px; color: green; font-size: 10px">{{ item.value }}</span>
-
- </el-option>
- </el-select>
- </template>
- </div>
-
-
-
-
- var Main = {
- data() {
- return {
- cities: [{
- value: 'Beijing',
- label: '北京'
- }, {
- value: 'Shanghai',
- label: '上海'
- }, {
- value: 'Nanjing',
- label: '南京'
- }, {
- value: 'Chengdu',
- label: '成都'
- }, {
- value: 'Shenzhen',
- label: '深圳'
- }, {
- value: 'Guangzhou',
- label: '广州'
- }],
- value: ''
- }
- }
- }
- var Ctor = Vue.extend(Main)
- new Ctor().$mount('#app')
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/107237
推荐阅读
- 相关标签
Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。
