element ui 使选择下拉框 和 输入框一样宽

526 阅读1分钟

html

        <el-select
          v-model="loginForm.Tid"
          filterable
          placeholder="请选择角色登录"
          style="width: 100%"
          @focus="setMinWidthEmpty"
          @change="selCharacter"
        >
          <el-option
            v-for="item in techLIst"
            :key="item.tenantid"
            :label="item.tenantName "
            :value="item.tenantid"
          >
          </el-option>
        </el-select>
      </el-form-item>

js methods

    setMinWidthEmpty(val) {
      // 无数据的情况下,给请选择提示设置最小宽度
      let domEmpty = document.getElementsByClassName(
        "el-select-dropdown__empty"
      );
      if (domEmpty.length > 0) {
        domEmpty[0].style["min-width"] = val.srcElement.clientWidth + 2 + "px";
      }
    },

主要就是靠@focuns的方法