Closed hqzh closed 3 years ago
filterNodeMethod没有暴露出来,可以复写:
this.$refs.treeSelect.$refs.tree.filterNodeMethod=this._filterNodeMethodFun;
然后自定义方法:
// 树过滤
_filterNodeMethodFun(value, data, node) {
if (!value) return true;
return data.id.indexOf(value) !== -1;
}
treeSelect搜索的时候触发:
// 树过滤
_searchFun(value) {
this.$refs.treeSelect.$refs.tree.filter(value);
}
// filterNodeMethod没有暴露出来,可以复写:
this.$refs.treeSelect.$refs.tree.filterNodeMethod=this._filterNodeMethodFun;
请问一下这步复写是写在_searchFun 里面吗?
我现在只查找label是这么写的
_searchFun(value) {
this.$refs.treeSelect.$refs.tree.filter(value);
this.$refs.treeSelect.filterFun(value);
}
在你使用 <el-tree-select/>
的文件里面这样写
在你使用 的文件里面这样写
this.$refs.treeSelect.treeDataUpdateFun(this.dataTree); this.$refs.treeSelect.$refs.tree.filterNodeMethod = this._filterNodeMethodFun;
我在赋值之后写的,但是没生效
_filterNodeMethodFun(value, data, node) { const target = value.trim(); if (!target) { return true; } if ( new RegExp(target, 'i').test(data.title) || new RegExp(target, 'i').test(data.titleEn) ) { return true; } const parentName = node.parent.data.title && new RegExp(target, 'i').test(node.parent.data.title); return parentName; }, //配置信息 treeParams: { clickParent: false, filterable: true, 'default-expand-all': false, 'expand-on-click-node': true, data: [], props: { children: 'children', label: 'title', disabled: 'disabled', value: 'titleEn', }, },
原生el-tree是生效了的
这里只是修改一个查询机制,searchFun的时候 执行
// 树过滤
_searchFun(value) {
this.$refs.treeSelect.$refs.tree.filter(value);
}
执行之后可以在_filterNodeMethodFun添加断点 查看是否进入该方法
这里只是修改一个查询机制,searchFun的时候 执行
// 树过滤 _searchFun(value) { this.$refs.treeSelect.$refs.tree.filter(value); }
这个方法是写了的,但是没有进入_filterNodeMethodFun这个方法
刚调试了一下 这样使用: 初始化:
this.$nextTick(() => {
this.$refs.treeSelect._filterFun = this._filterFun;
});
复写方法:
_filterFun(value, data, node) {
return data[this.props.value].includes(value);
},
searchFun可以不变:
_searchFun(value) {
console.log(value, '<--_searchFun');
// 自行判断 是走后台查询,还是前端过滤
this.$refs.treeSelect.filterFun(value);
// 后台查询
// this.$refs.treeSelect.treeDataUpdateFun(treeData);
},
_filterFun
_filterFun 方法还是没有进去啊
完整代码贴出来吧,我这里测试都过了
完整代码贴出来吧,我这里测试都过了
这个组件怎么做在线code[流汗]
<el-tree-select
:styles="styles"
v-model="formData.tableName"
:selectParams="selectParams"
:treeParams="treeParams"
@searchFun="_searchFun"
@node-click="_nodeClickFun"
ref="treeSelect"
/>
async mounted(){
await this.$nextTick();
this.$refs.treeSelect._filterFun = this._filterFun;
}
// methods
_searchFun(value) {
this.$refs.treeSelect.filterFun(value);
},
_filterFun(value, data, node) {
console.log(value);
console.log(data);
const target = value.trim();
if (!target) {
return true;
}
if (
new RegExp(target, 'i').test(data.title) ||
new RegExp(target, 'i').test(data.titleEn)
) {
return true;
}
const parentName =
node.parent.data.title &&
new RegExp(target, 'i').test(node.parent.data.title);
return parentName;
},
在线测试了一下,打包之后的文件重写没有访问,最近没有其他需求,增加了一个小版本 3.1.11 npm更新
参数:
filter-node-method 自定义过滤方式
:filterNodeMethod="_filterFun"
或者
:filter-node-method="_filterFun"
生效了,感谢,总结一下,还是要靠searchFun触发
:filterNodeMethod="_filterFun"
@searchFun="_searchFun"
_filterFun(value, data, node) {
const target = value.trim();
if (!target) {
return true;
}
if (
new RegExp(target, 'i').test(data.title) ||
new RegExp(target, 'i').test(data.titleEn)
) {
return true;
}
const parentName =
node.parent.data.title &&
new RegExp(target, 'i').test(node.parent.data.title);
return parentName;
},
_searchFun(value) {
this.$refs.treeSelect.filterFun(value);
},
我想label ,vaule ,id 都可以搜