技術標籤：element-uiJavaScript

需求如下：遠端搜尋select限制搜尋內容輸入的長度

方法一：加了id選擇器，實測el-select加class類選擇器並不能夠渲染出來，加了也是無效的。el-select的本質還是input，原生js通過setAttribute直接設定元件內input元素的maxlength屬性即可

html：

 <el-form-item label="禮品名稱" prop="name" >
                <el-select
                  id="giftNameLimit"
                  v-model="query.name"
                  filterable
                  remote
                  reserve-keyword
                  clearable
                  placeholder="請輸入禮品名稱"
                  :remote-method="queryGiftNameList">
                <el-option
                  v-for="(item,i) in giftNameList"
                  :key="i"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
   </el-form-item>
 

js：

 methods: {     
     dom(){
constinput=document.querySelector("#giftNameLimit");
      input.setAttribute("maxLength",30);
 },
}

 mounted/activated() {
      this.dom();
    },

方法二：通過.native獲取內部input （這個是從別的部落格看到的，還沒有親測）

html：

<el-select
  v-model="searchForm.productId"
  placehoder="請輸選擇產品或輸入產品名字過濾"
  filterable
  @input.native="filterData"
  clearable
  ref="searchSelect"
>
<el-select>

 

js：

// 對輸入字串控制
filterData(){
var str = this.$refs.searchSelect.$data.selectedLabel;// 此屬性得到輸入的文字
// 控制的js
if(str.length>20){this.$refs.searchSelect.$data.selectedLabel = str.substr(0,21)
}