element UI 解决select选择文字后长度自适应问题
element UI 解决select选择文字后长度自适应问题，百度搜了个CSDN的文章，要充值VIP才能解锁此问题，无奈喜欢白嫖的我选择放弃，自己摸索看看，不成就算了。瞎猫碰到死耗子，这也是一种解决方法吧，记此笔记，与君共勉！
html 代码
<div class="box">
<span>{{ typevalue }}span>
<el-select v-model="typevalue" placeholder="请选择">
<el-option v-for="item in itemType" :key="item.value" :label="item.label" :value="item.value"> el-option>
el-select>
div>
<div class="box">
<span>{{ handlevalue }}span>
<el-select v-model="handlevalue" placeholder="请选择">
<el-option v-for="item in itemHandle" :key="item.value" :label="item.label" :value="item.value"> el-option>
el-select>
div>
css 样式
.box {
display: inline-block;
position: relative;
padding-right: 35px;
margin-left: 15px;
}
/* 用定位加span的结合解决select文字长度自适应问题 */
.box span {
display: inline-block;
width: 100%;
opacity: 0;
}
.el-select {
position: absolute;
z-index: 5;
width: 100%;
left: 0;
}
js部分
new Vue({
el: '#app',
data() {
return {
itemType: [
{
value: '建筑类项目',
label: '建筑类项目'
},
{
value: '工程类项目',
label: '工程类项目'
},
{
value: '社会投资类项目',
label: '社会投资类项目'
},
{
value: '出让类项目',
label: '出让类项目'
},
{
value: '社会投资中小型工程项目',
label: '社会投资中小型工程项目'
}
],
typevalue: '建筑类项目',
itemHandle: [
{
value: '立项用地规划许可',
label: '立项用地规划许可'
},
{
value: '工程建设许可',
label: '工程建设许可'
},
{
value: '施工许可',
label: '施工许可'
},
{
value: '竣工验收',
label: '竣工验收'
}
],
handlevalue: '立项用地规划许可'
}
}
})
做个笔记，免得忘记！与君共勉，大神勿喷。
请先登录后再评论登录
1楼
很棒，小冬
回复
