TreeSelect增加可筛选功能

TreeSelect官方可筛选示例

<template><el-tree-selectv-model="value":data="data"filterablestyle="width: 240px"/><el-divider /><el-divider />filter node method:<el-tree-selectv-model="value":data="data":filter-node-method="filterNodeMethod"filterablestyle="width: 240px"/>
</template><script lang="ts" setup>
import { ref } from 'vue'const value = ref()const sourceData = [{value: '1',label: 'Level one 1',children: [{value: '1-1',label: 'Level two 1-1',children: [{value: '1-1-1',label: 'Level three 1-1-1',},],},],},{value: '2',label: 'Level one 2',children: [{value: '2-1',label: 'Level two 2-1',children: [{value: '2-1-1',label: 'Level three 2-1-1',},],},{value: '2-2',label: 'Level two 2-2',children: [{value: '2-2-1',label: 'Level three 2-2-1',},],},],},{value: '3',label: 'Level one 3',children: [{value: '3-1',label: 'Level two 3-1',children: [{value: '3-1-1',label: 'Level three 3-1-1',},],},{value: '3-2',label: 'Level two 3-2',children: [{value: '3-2-1',label: 'Level three 3-2-1',},],},],},
]
const data = ref(sourceData)const filterNodeMethod = (value, data) => data.label.includes(value)
</script>

应用到本地项目

本地tree数据结构

本地项目中的tree结构数据，确定筛选的字段名称：name

代码实现

<el-form-item label="父分类编号" prop="parentId"><el-tree-selectv-model="formData.parentId":data="categoryTree":props="defaultProps"check-strictlydefault-expand-all:filter-node-method="filterNodeMethod"filterableplaceholder="请选择父分类编号"/></el-form-item>const filterNodeMethod = (value, data) => data.name.includes(value)      

注意：变量名要根据本地数据调整