el-tree-select

搜索后的结果里需要有子节点

<el-tree-select
              v-model="user.productCode"
              clearable
              filterable
              :data="categoryOptions"
              :render-after-expand="false"
              style="width: 100%"
              placeholder="请选择商品类目"
              node-key="value"
              :filter-node-method="filterNodeMethod"
              :props="{ label: 'label', value: 'value', children: 'children', deep: 'deep' }"
              @node-click="getNodes"
              @node-expand="expandOnClickNode"
              @input="changeTreeCons"
              ref="treeSelectRef"
            />
            
            
 let nodes_=[];
const changeTreeCons=()=>{
  nodes_=[];
}
// 自定义过滤方法 - 保留父节点路径
const filterNodeMethod = (value, data) => {
  if (!value) return true;
  return checkNodeOrChildren(data, value);
};
// 递归检查节点及其子节点是否包含搜索词
const checkNodeOrChildren = (node, value) => {
  if (node.label.includes(value)|| nodes_.includes(node.parentId)) {
    nodes_.push(node.value);
    return true
  };
  return false;
};

允许自由选择节点，不限制为只能选择最后一级

<el-tree-select
            v-model="addCategoryForm.categoryId"
            :disabled="addCategoryForm.isViewMode"
            :data="categoryOptions"
            :render-after-expand="false"
            filterable
            style="width: 100%"
            placeholder="请选择商品类目"
            node-key="value"
            :check-strictly="true"
            :props="{ label: 'label', value: 'value', children: 'children',selectable: () => true }"
          />

其他:接口数据组装树需要的结构数据(需根据自身情况):

const convertToTree = (data: any[]) => {
  if (!Array.isArray(data)) {
    console.error('数据格式错误，data 不是数组:', data);
    return [];
  }
  const tree = [];
  const map = new Map();
  data.forEach((item) => {
    map.set(item.id, {
      label: item.categoryName,
      value: item.id, // 确保 value 是唯一的
      children: [],
      deep: item.deep,
      parentId: item.parentId
    });
  });
  data.forEach((item) => {
    const parentId = String(item.parentId);
    if (parentId === '0') {
      tree.push(map.get(item.id));
    } else {
      const parent = map.get(parentId);
      if (parent) {
        parent.children.push(map.get(item.id));
      }
    }
  });
  return tree;
};