elementUI el-select allow-create属性创建新条目时限制输入字符长度

最新推荐文章于 2024-07-26 09:25:04 发布

jmymy0

最新推荐文章于 2024-07-26 09:25:04 发布

阅读量1.1k

点赞数

文章标签： javascript vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/jmymy0/article/details/129487829

版权

 <el-form-item :label="$t('products.tags')" id="tagid">
   <el-select id="selecttagsId" 
              @input.native="filterData"
              class="fullWidth" 
              ref="tags"
              v-model="ruleForm.tags" 
              multiple 
              filterable
              allow-create 
              default-first-option 
              :placeholder="$t('products.examplesummer')">
      <el-option v-for="item in productTags" :key="item.name" :label="item.name"
      :value="item.name">
              <span style="float: left">{{ item.name }}</span>
              <el-tag v-if="true" size="mini" effect="dark" type="danger"
              @click.stop="handleDelettag(item, 3, $event)">
                <i class="el-icon-delete"></i>
               </el-tag>
      </el-option>
   </el-select>
   <el-tag :key="tag + index" v-for="(tag, index) in ruleForm.tags" closable
   :disable-transitions="false" @close="handleClose(tag)">
         {{ tag }}
   </el-tag>
</el-form-item>

如果multiple为false时，单选则只需要对单个input添加限制即可

created(){
  this.$nextTick(()=>{
      this.inputLen()
  })
}
 methods: {
        inputLen() {//限制供应商 类别 长度  
            const selectId = document.querySelector("#selecttagsId");
            if(selectId){
               selectId.setAttribute("maxLength", 20);
            }
        },
}

如果multiple为true时，多选则需要对每个input添加限制

 filterData() {//限制标签长度  multiple 多个标签下有多个input 需遍历
    var inputcontrol= document.getElementById("tagid").getElementsByTagName("input");
    if(inputcontrol && inputcontrol.length>0){
       for(var i=0;i<inputcontrol.length;i++){
         inputcontrol[i].setAttribute("maxLength", 20);
       }
    }
 },