TreeSelect增加可筛选功能

TreeSelect官方可筛选示例

html 复制代码
<template>
  <el-tree-select
    v-model="value"
    :data="data"
    filterable
    style="width: 240px"
  />
  <el-divider />
  <el-divider />
  filter node method:
  <el-tree-select
    v-model="value"
    :data="data"
    :filter-node-method="filterNodeMethod"
    filterable
    style="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

代码实现

html 复制代码
<el-form-item label="父分类编号" prop="parentId">
        <el-tree-select
          v-model="formData.parentId"
          :data="categoryTree"
          :props="defaultProps"
          check-strictly
          default-expand-all
          :filter-node-method="filterNodeMethod"
          filterable
          placeholder="请选择父分类编号"
        />
      </el-form-item>

const filterNodeMethod = (value, data) => data.name.includes(value)      
html 复制代码
注意:变量名要根据本地数据调整
相关推荐
十一吖i8 分钟前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年9 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_10 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891112 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾14 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking14 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu16 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym20 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫22 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫25 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js