element UI 解决select选择文字后长度自适应问题

烟雨朦胧、人去楼空 1     1718      前端   1     1
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楼
很棒,小冬
captcha
忘记密码? 注册
第三方登录
微信赞赏
支付宝赞赏