van-picker级联选择(获取字段+children为null的坑+搜索功能)
【代码】van-picker级联选择(获取字段+children为null的坑+搜索功能)
·
//data返回数据数组,index返回索引数组
onConfirm(data,index)
{
let vm = this;
let str = ""; // 呈现页面显示 /xxx/xxx/xxx
for(let i = 0;i < data.length; i ++){
if(i>0){
str += "/" + data[i];
}
else{
str +=data[i];
}
}
// 获取一级分类
vm.form.oneCategoryId = vm.columns[index[0]].id;
vm.form.oneCategoryName = vm.columns[index[0]].name;
// 获取二级分类
if(vm.columns[index[0]].children !== undefined){
vm.form.twoCategoryId =vm.columns[index[0]].children[index[1]].id;
vm.form.twoCategoryName =vm.columns[index[0]].children[index[1]].Name;
}
this.form.kind = str;
this.showPicker = false
}
picker级联选择功能的bug
/** 问题:
使用级联选择功能时,
1-1 如果数组的第一项的子项(children)为空字符串,会导致渲染不出来第二列。
1-2 如果某一项的子项为空字符串,此项的子项在页面上会显示之前的子项。**/
解决:
把数组的第一项或某一项设的子项(children)置为空字符串即可复现
this.tableData = res.data.map((item, index) => {
//item.text = item.name;
//delete item.name;
//if (item.children.length > 0) {
// item.children = item.children.map((value, i) => {
// value.text = value.name;
// delete value.name;
// return value;
// });
//}
if(item.children==null) {
item.children = [{ text: "", id: "" }];//子项(children)置为空字符串
}
return item;
});
vant picker选择器组件增加search搜索功能(两种样式)
1.直接放到pop里面与picker同级
2.直接放到picker中
watch: { //实时监听搜索输入内容
searchKey: function () {
let key = String( this.searchKey );
key = key.replace( /\s*/g, "" ); //去除搜索内容中的空格
const reg new RegExp( key, "ig" ); //匹配规则-i:忽略大小写,g:全局匹配
/* 进行筛选,将筛选后的数据放入新的数组中,‘name’键可根据需要搜索的key进行调整 */
this.searchColumns = this.columns.filter( item => item.name.match( reg ) !=null );
}
}
更多推荐
所有评论(0)