请问一下如何自定义搜索

[hqzh]

我想label ,vaule ,id 都可以搜

[ayiaq1]

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);
}

[hqzh]

// 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);
 }

[ayiaq1]

在你使用 <el-tree-select/>的文件里面这样写

[hqzh]

在你使用 的文件里面这样写

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是生效了的

[ayiaq1]

这里只是修改一个查询机制，searchFun的时候 执行

// 树过滤
 _searchFun(value) {
      this.$refs.treeSelect.$refs.tree.filter(value);
}

执行之后可以在_filterNodeMethodFun添加断点 查看是否进入该方法

[hqzh]

这里只是修改一个查询机制，searchFun的时候 执行

// 树过滤
 _searchFun(value) {
      this.$refs.treeSelect.$refs.tree.filter(value);
}

这个方法是写了的，但是没有进入_filterNodeMethodFun这个方法

[ayiaq1]

刚调试了一下 这样使用： 初始化：

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);
 },

[hqzh]

_filterFun

_filterFun 方法还是没有进去啊

[ayiaq1]

完整代码贴出来吧，我这里测试都过了

[hqzh]

完整代码贴出来吧，我这里测试都过了

这个组件怎么做在线code[流汗]

[hqzh]

<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;
 },

[ayiaq1]

在线测试了一下，打包之后的文件重写没有访问，最近没有其他需求，增加了一个小版本 3.1.11 npm更新

参数：

filter-node-method 自定义过滤方式

:filterNodeMethod="_filterFun" 
 或者
:filter-node-method="_filterFun" 

[hqzh]

生效了，感谢，总结一下，还是要靠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);
 },