el-select的el-option选择器:实现选项内容自定义两行
效果图:<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-mod
·
效果图:
<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')
更多推荐
已为社区贡献2条内容
所有评论(0)