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 复制代码
注意:变量名要根据本地数据调整
相关推荐
_Legend_King2 分钟前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui
爱吃青椒不爱吃西红柿‍️3 分钟前
华为ASP与CSP是什么?
服务器·前端·数据库
余生H4 分钟前
transformer.js(三):底层架构及性能优化指南
javascript·深度学习·架构·transformer
一棵开花的树,枝芽无限靠近你7 分钟前
【PPTist】添加PPT模版
前端·学习·编辑器·html
陈王卜10 分钟前
django+boostrap实现发布博客权限控制
java·前端·django
景天科技苑17 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
SameX19 分钟前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
石小石Orz26 分钟前
Three.js + AI:AI 算法生成 3D 萤火虫飞舞效果~
javascript·人工智能·算法
小行星12528 分钟前
前端预览pdf文件流
前端·javascript·vue.js
join830 分钟前
解决vue-pdf的签章不显示问题
javascript·vue.js·pdf