单个el-select搜索框如何去除空格限制el-select输入内容控制等在这篇文章:http://t.csdn.cn/u7C6Or
如果多个el-select循环出来的,上面文章说的方法就会失效,下面是解决方法
需求描述:
-
多个el-select下拉框,带搜索过滤功能(直接在el-select上使用filterable实现)
-
但是同时要求el-select搜素输入框去除空格
HTML代码
<div
v-for="(item, index) in testList1"
:key="index"
>
<el-select
:ref="`elementSelect${index}`"
v-model="item.name"
filterable
style="width: 35%; margin-right: 20px"
placeholder="请选择"
value-key="name"
@input.native="trimInput(index)"
>
<el-option
v-for="items in testList2"
:key="items.dataId"
:label="items.name"
:value="items"
:disabled="items.disabled"
></el-option>
</el-select>
</div>
在el-select标签上增加ref属性与@input属性(记得.native)
注意:此处的ref需要写成变量的,笔者此处使用的循环出来的index下标,保证每个循环出来的下拉框ref值都不一样
数据就不贴在这了,笔者认为多少数据对需求无影响。循环出来多少下拉框效果都一样。
JS代码
trimInput(index) {
this.$refs[`elementSelect${index}`][0]._data.selectedLabel =
this.$refs[`elementSelect${index}`][0]._data.selectedLabel.trim()
},
非常的简单,就可以实现上面的需求了
区别
单个选择框与循环出来多个选择框区别:
-
ref需要是不同的
单选择框ref固定值即可
多选择框ref不能使用同一个,否则会出现错误
-
获取输入框的内容取值也是不同的
单选框的获取方式是$refs.name.$data.selectedLabel
多选框的获取方式是$refs.name._data.selectedLabel
一字之差,但是结果却千差万别