vue3树形搜索功能

1.组件库中代码

<div> <el-tree :data="treeInfo" :props="defaultProps" @node-click="handleNodeClick" ref="selectTree"    :filter-node-method="filterNode" />  </div>

2.绑定显示数据

const defaultProps = {

      children: 'children',

      label: 'name',}

绑定ref   const selectTree = ref()

3.点击获取节点信息调用接口

   const handleNodeClick = async (val: any) => {

      let params = {

        organizationCode: val.code || '' || null,

      };

      const { data } = await userApi.getUserList(params);

      state.tableData.data = data.list }

4.搜索到节点高亮

:highlight-current="true"

5.使用节点筛选方法

 

    const filterNode = (value: any, data: any) => {

      console.log(value, data);

      if (!value) return true

      return data[defaultProps.label].indexOf(value) !== -1

    }

6.使用watch监听input框中的数据

   watch(() => state.input, (newValue: any, oldValue: any) => {

      selectTree.value.filter(newValue)

    })