1.vue报错:Error in callback for watcher “options“: “TypeError: Cannot read propertie ‘level‘ of null
我的报错使用场景:级联选择器是遍历出来的,数据也是遍历的数组里面的,报错的原因是我删除了option绑定的数组,因为后台接口不需要这个数据
解决:给级联选择器加key,key的值是:new Date().getTime(),在每次数据改变的时候更新key,即this.keyIndex = new Date().getTime()
2.使用自带的filterable检索,并自定义检索方法,:filter-method
但是这个方法是有默认参数的,当不满足自己的需要,需要传其他参树的时候,
可以使用以下方式:
1.闭包方式:
:filter-method=“filterProduct({everyIndex,itemIndex,list:every.list})”
filterProduct(param){
//param----自定义传递的参数 node----节点 keyword----搜索关键词
//param.list 当前级联选择器的option
return (node,keyword)=>{
console.log(param,"换了个写法-param")
console.log(node,"换了个写法-node")
console.log(keyword,"换了个写法-keyword")
if (!!~node.label.toUpperCase().indexOf(keyword.toUpperCase())) {
return true
}
}
},
2.bind方法
:filter-method=“filterOrg.bind(this, param)”
filterOrg(param, value, data, node) {
// 在 filterOrg 方法中可以访问到传递的参数 param
console.log(param);
// 具体的过滤逻辑
// ...
// 返回过滤结果
return true; // 或者根据条件返回 true 或 false
}
3.自定义搜索方法后,使用slot自定义了节点内容
<span slot-scope="{ node,data }" class="custom-tree-node">
<span>{{ data.id}}--{{ data.name}}</span>
</span>
但是搜索出来后和自定义的不一样,只有label的那个字段,问题原因:
搜索的建议面板和原来的dom不是同一个dom
解决方式:
在获取到数据之后,对数据进行整体处理
function handleArr(arr) {
arr.forEach((el) => {
el.labelText = el.orgId + '-'+el.orgName;
handleArr(el.childrenList || []);
});
}
getOrganizationWithCondition({ templateId: this.templateNo,needChildren:1 }).then(
(res) => {
if(res.code == 0){
let arr = res.data
let b = arr
handleArr(b);
console.log(b,"机构处理好的数据")
this.$set(every, "list", b);
// this.$set(every, "list", res.data);
// every.list = res.data;
}
}
);
处理完之后直接使用:
<span>{{ data.labelText }}</span>```