TreeFilter 树形筛选器

基础使用

defaultValue 可以在初始化时，默认选择某一个树节点。

监听 change 事件，获取当前选中的节点。

部门列表(单选)

全部

Level one 1

Level two 1-1

Level three 1-1-1

Level three 1-1-2

Level one 2

Level two 2-1

Level two 2-2

Level one 3

Level two 3-1

Level two 3-2

部门列表(多选)

Level one 1

Level two 1-1

Level three 1-1-1

Level three 1-1-2

Level one 2

Level two 2-1

Level two 2-2

Level one 3

Level two 3-1

Level two 3-2

<script setup lang="ts" name="TreeFilterDemo">
import type { TreeKey } from "element-plus";
import { reactive } from "vue";
import { ElMessage } from "element-plus";
import { TreeFilter } from "@/components/pro/tree-filter";
import { useNamespace } from "@/composables";

const ns = useNamespace("tree-filter-demo");

interface Tree {
  id: number;
  label: string;
  children?: Tree[];
}

const treeFilterValue = reactive<{ departmentId: string }>({ departmentId: "1" });
const changeTreeFilter = (val: string | TreeKey[]) => {
  ElMessage.success(`你选择了 id 为 ${val} 的数据🤔`);
  treeFilterValue.departmentId = val as string;
};

const treeFilterValue1 = reactive<{ departmentId: TreeKey[] }>({ departmentId: ["11"] });
const changeTreeFilter1 = (val: string | TreeKey[]) => {
  ElMessage.success(`你选择了 id 为 ${JSON.stringify(val)} 的数据🤔`);
  treeFilterValue1.departmentId = val as TreeKey[];
};

const data: Tree[] = [
  {
    id: 1,
    label: "Level one 1",
    children: [
      {
        id: 4,
        label: "Level two 1-1",
        children: [
          { id: 9, label: "Level three 1-1-1" },
          { id: 10, label: "Level three 1-1-2" },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "Level one 2",
    children: [
      { id: 5, label: "Level two 2-1" },
      { id: 6, label: "Level two 2-2" },
    ],
  },
  {
    id: 3,
    label: "Level one 3",
    children: [
      { id: 7, label: "Level two 3-1" },
      { id: 8, label: "Level two 3-2" },
    ],
  },
];
</script>

<template>
  <div :class="ns.b()">
    <TreeFilter
      label="label"
      title="部门列表(单选)"
      :data="data"
      :defaultValue="treeFilterValue.departmentId"
      @change="changeTreeFilter"
    />

    <TreeFilter
      title="部门列表(多选)"
      multiple
      label="label"
      :data="data"
      :defaultValue="treeFilterValue1.departmentId"
      @change="changeTreeFilter1"
    />
  </div>
</template>

<style lang="scss" scoped>
@use "@/styles/mixins/bem" as *;

@include b(tree-filter-demo) {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  height: 100%;
  width: 100%;
}
</style>

隐藏源代码

API 获取数据

通过 request-api 配置项，可以让组件内部调用接口获取数据，并自动添加 全部 选项在第一级。

通过 defaultRequestParams 配置项，可以设置接口需要传递的参数。

通过 transformData 配置项，可以在通过接口获取数据进行加工处理，最后返回一个新的数据。

部门列表

暂无数据

<script setup lang="ts" name="TreeFilterDemo">
import type { TreeKey } from "element-plus";
import { reactive } from "vue";
import { ElMessage } from "element-plus";
import { TreeFilter } from "@/components/pro/tree-filter";
import { useNamespace } from "@/composables";

const ns = useNamespace("tree-filter-demo");

interface Tree {
  id: number;
  label: string;
  children?: Tree[];
}

const treeFilterValue = reactive<{ departmentId: string }>({ departmentId: "1" });

// 模拟后端 API
const DataService = {
  getList: async (requestParams?: Record<string, any>) => {
    console.log("请求参数: ", requestParams);

    const data: Tree[] = [
      {
        id: 1,
        label: "Level one 1",
        children: [
          {
            id: 4,
            label: "Level two 1-1",
            children: [
              { id: 9, label: "Level three 1-1-1" },
              { id: 10, label: "Level three 1-1-2" },
            ],
          },
        ],
      },
      {
        id: 2,
        label: "Level one 2",
        children: [
          { id: 5, label: "Level two 2-1" },
          { id: 6, label: "Level two 2-2" },
        ],
      },
      {
        id: 3,
        label: "Level one 3",
        children: [
          { id: 7, label: "Level two 3-1" },
          { id: 8, label: "Level two 3-2" },
        ],
      },
    ];

    return Promise.resolve({
      code: 200,
      message: "success",
      data,
    });
  },
};
const changeTreeFilter = (val: string | TreeKey[]) => {
  ElMessage.success(`你选择了 id 为 ${val} 的数据🤔`);
  treeFilterValue.departmentId = val as string;
};

const handleTransformData = (data: Record<string, any>[]) => {
  console.log("可以在这里进行数据处理，然后返回新的数据", data);
  return data;
};
</script>

<template>
  <div :class="ns.b()">
    <TreeFilter
      label="label"
      title="部门列表"
      :request-api="DataService.getList"
      :default-request-params="{ id: 4 }"
      :transform-data="handleTransformData"
      :defaultValue="treeFilterValue.departmentId"
      @change="changeTreeFilter"
    />
  </div>
</template>

<style lang="scss" scoped>
@use "@/styles/mixins/bem" as *;

@include b(tree-filter-demo) {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  height: 100%;
  width: 100%;
}
</style>

隐藏源代码

Attributes

属性名	说明	类型	默认值
data	树形数据	array	[]
requestApi	请求数据的 api	function	—
defaultRequestParams	默认请求参数	object	{}
transformData	对请求成功的数据进行处理	function	—
title	treeFilter 标题	string	''
id	选择的 id	string	id
label	显示的 label	string	label
multiple	是否为多选	boolean	false
defaultValue	默认选中的值	TreeKey / array	—
enableTotal	是否显示 全部 选项	boolean	true
defaultFirst	是否默认选中第一个选项	boolean	false
card	是否使用卡片样式	boolean	true
...	其他扩展属性，支持所有 ElTree Attributes	...	...

Events

名称	说明	类型
change	选中值变化事件	function

Slots

插槽名	说明	作用域插槽参数
title	自定义标题	—
...	其他扩展属性，支持所有 ElTree Slots	...

Exposes

名称	说明	类型
treeData	树形数据	array
treeAllData	包含"全部"的树数据	array
initTreeData	初始化树形数据	function
treeInstance	ElTree 实例	object