TreeFilter 树形筛选器

基础使用

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

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

vue

<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 配置项，可以在通过接口获取数据进行加工处理，最后返回一个新的数据。

部门列表

暂无数据

vue

<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`

TreeFilter 树形筛选器 ​

基础使用 ​

部门列表(单选)

部门列表(多选)

API 获取数据 ​

部门列表

Attributes ​

Events ​

Slots ​

Exposes ​