Element-UI中 el-select选择器实现宽度自适应
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
一、效果
二、代码
<template>
<el-select class="autoWidth-select" v-model="value" placeholder="请选择">
<template slot="prefix">
{{(options.find(s => s.value === value) || {}).label}}
</template>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '炒面炒面炒面'
}, {
value: '选项2',
label: '双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶'
}, {
value: '选项3',
label: '蚵仔煎蚵仔煎蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: '选项1'
}
},
}
</script>
<style scoped >
.autoWidth-select {
min-width: 120px;
}
.autoWidth-select >>> .el-input__prefix{
position: relative;
left: 0px;
box-sizing: border-box;
border: 1px solid #ffffff00;
padding: 0 30px;
height: 40px;
line-height: 40px;
visibility: hidden;
}
.autoWidth-select >>> input{
position: absolute;
}
</style>
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 8 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)