在textarea中实现批量查询ID时,可通过回车事件触发进行查询,在查询之前实时对输入框的id进行去重。一般都是逗号分隔的查询,如何实现比较宽松智能的交互?满足多种查询方式的场景:
1.能逗号分隔进行查询
2.能逗号分隔且是换行状态下的查询
3.换行或不换行的逗号分隔查询(部分换行)的情况:
4.间隔多个换行也能查询:
5.无逗号的换行查询
6.能够对id进行去重
输入框:
<el-input
type="textarea"
placeholder="请输入"
v-model="userOptions"
@keyup.enter.native="init"
>
</el-input>
首先使用正则过滤掉换行、多个换行、逗号紧跟换行的情况,并拆成数组:
let strarr = this.userOptions.split(/\n+|,\n*/gm);//分割去除换行后的ID列表数组
遍历进行去重:
let newArr = []; //一个新的临时数组
for(let i = 0; i < strarr.length; i++){
//如果当前数组的第i已经保存进了临时数组,那么跳过,
//否则把当前项push到临时数组里面
if ((newArr.indexOf(strarr[i]) == -1)&&strarr[i]!==""){//去重
newArr.push(strarr[i]);
}
}
到这里已经获取到了用户输入数据的去重id,newArr数组为最终需要获取到的数据也可以接口数据的查询了。但是输入框的内容还是没有变的,同时也需要对输入框进行去重,下面要对输入框文本进行调整:
let newstr = this.userOptions;
for(let j in newArr ){
let idx = newstr.indexOf(newArr[j]);//当前要检查的ID
let before = newstr.substr(0,idx+newArr[j].length); //先保留首个当前ID及之前的字符串
let after = newstr.slice(before.length).replace(new RegExp(newArr[j]+",|"+newArr[j]+"\n",'gm'),'');//删除掉当前ID之后的所有当ID
newstr = before + after; //两端字符串连接
}
this.userOptions = newstr;
分为两个变量before、after分别对输入的newstr字符串进行处理,每次遍历保存当前newstr开始到newArr中的id在newstr中的位置。
同时检查在保存后的before直到字符串结束的重复所有ID进行删除。
每轮处理后组成新的newstr继续检查下一个id是否和后面的id重复,直到before之后的所有重复id被清除。
完整代码:
data() {
return {
userOptions: ""
};
},
...
init() {
let newArr = []; //一个新的临时数组
let newstr = this.userOptions;
let strarr = this.userOptions.split(/\n+|,\n*/gm);//分割去除换行后的ID列表数组
let after="",before="";
for(let i = 0; i < strarr.length; i++){
//如果当前数组的第i已经保存进了临时数组,那么跳过,
//否则把当前项push到临时数组里面
if ((newArr.indexOf(strarr[i]) == -1)&&strarr[i]!==""){//去重
newArr.push(strarr[i]);
}
}
for(let j in newArr ){
let idx = newstr.indexOf(newArr[j]);//当前要检查的ID
let before = newstr.substr(0,idx+newArr[j].length); //先保留首个当前ID及之前的字符串
let after = newstr.slice(before.length).replace(new RegExp(newArr[j]+",|"+newArr[j]+"\n",'gm'),'');//删除掉当前ID之后的所有相同ID
newstr = before + after; //两端字符串连接
}
this.userOptions = newstr;
let params = {
url: "xxx",
data: newArr
};
this.$api
.fetch({
params //参数
})
.then(res => {
//查询完成
})
},
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。