el-tree(element-plus)搜索树形菜单，并且带全选多选功能

已于 2023-05-17 16:46:14 修改
阅读量4.4k 收藏 6
点赞数 3
文章标签： vue.js elementui javascript
于 2023-05-11 10:41:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yasuo56/article/details/130616612
版权

如下图所示

 采用的是elementui的元素来进行此功能的开发，下面为代码示例

<template>
    <div class="body">
        <div class="left">
            <el-input v-model="filterText" placeholder="请输入要搜索的知识点" />
            <el-button type="primary" @click="selectAll" :disabled="Fselect">{{ checkAllText }}</el-button>
            <el-tree ref="treeRef" class="filter-tree" :data="filteredData" default-expand-all
                :filter-node-method="(filterNode as any)" :render-after-expand="false" multiple show-checkbox
                @check="handleNodeClick" node-key="id" />
        </div>
        <el-divider direction="vertical" />
        <div class="right">
            <p>已选{{ selectNum }}个</p>
            <el-tag type="info" size="large" v-for="(el, i) in childrenValues" :key="i" style="margin: 5px 0 0 5px;"
                @close="handleClose(el)" closable>
                {{ el.label }}
            </el-tag>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { computed, ref, watch } from 'vue'
import { ElTree } from 'element-plus'

interface Tree {
    id: number
    label: string
    children?: Tree[]
}
//是否全选
const isCheckAll = ref<boolean>(false);
const checkAllText = computed(() => isCheckAll.value ? '取消全选' : '全选');
const selectNum = ref<number>(0);
const filterText = ref<string>('')
const treeRef = ref<InstanceType<typeof ElTree>>()
const Fselect = ref<boolean>(false)
const data: Tree[] = [
    {
        id: 1,
        label: '计算机组成原理',
        children: [
            {
                id: 2,
                label: '寄存器1',
            },
        ],
    },
    {
        id: 3,
        label: '中央处理器',
        children: [
            {
                id: 4,
                label: '寄存器2',
            },
        ],
    },
    {
        id: 5,
        label: '寄存器',
        children: [
            {
                id: 6,
                label: '寄存器3',
            },
        ],
    },
    {
        id: 7,
        label: '寄存器',
        children: [
            {
                id: 8,
                label: '寄存器4',
            },
        ],
    }
]



watch(filterText, (val) => {
    treeRef.value!.filter(val)
    seleHig(childrenValues.value)

    if (val.length == 0) {
        Fselect.value = false
    } else {
        Fselect.value = true
    }
})


//选中高亮
const seleHig = (arr: { id: number, label: string }[]) => {
    const levelOneNodes = arr.map((node: Tree) => node.id);
    const levelTwoNodes = arr.flatMap((node: Tree) =>
        node.children ? node.children.map((child: Tree) => child.id) : []
    );
    defaultCheckedKeys.value = levelOneNodes.concat(levelTwoNodes);
    (treeRef.value as any).setCheckedKeys(defaultCheckedKeys.value);
}
const filterNode = (value: string, data: Tree) => {
    if (!value) return true
    return data.label.includes(value)
}


const filteredData = computed(() => {
    const result = data.filter((node) => filterFn(filterText.value, node))
    return result
})



const filterFn = (filterText: string, node: Tree) => {
    // 如果节点匹配过滤器文本，则将其返回
    if (node.label.includes(filterText)) {
        return true
    }
    // 否则，递归遍历该节点的所有子节点，查找匹配项
    if (node.children) {
        for (let i = 0; i < node.children.length; i++) {
            if (filterNode(filterText, node.children[i])) {
                return true
            }
        }
    }

    // 如果没有找到匹配项，则返回false
    return false
}






//选中的数据操作

/**
 * @param { id: number, label: string }>获取ref内选中的children的值
 */
const childrenValues = ref<{ id: number, label: string }[]>([])
const handleNodeClick = () => {
    const checkedNodes = (treeRef.value as any).getCheckedNodes()
    childrenValues.value = checkedNodes.flatMap(({ children }: Tree) =>
        children ? children.map(({ id, label }: Tree) => ({ id, label })) : []
    );
}

//默认选中的节点
const defaultCheckedKeys = ref<number[]>([]);

const selectAll = (): void => {
    class Person {
        getChildren = async (): Promise<void> => {
            try {
                isCheckAll.value = !isCheckAll.value;
                if (isCheckAll.value) {
                    seleHig(filteredData.value);
                    handleNodeClick();
                } else {
                    defaultCheckedKeys.value = [];
                    (treeRef.value as any).setCheckedKeys([]);
                    childrenValues.value = []
                }
            } catch (error) {
                // 在这里处理错误
                console.error('Error occurred:', error);
            }
        }
    }
    new Person().getChildren();
}



//监听childrenValues与data--children的差距
watch(childrenValues, (newVal: Tree[]) => {
    selectNum.value = newVal.length
    const childrenVa = filteredData.value.flatMap(node => node.children ?? []).map(child => child);
    if (newVal.length == childrenVa.length) {
        // 全选了
        isCheckAll.value = true;
    } else {
        // 部分选中或全没选
        isCheckAll.value = false;
    }
})
const handleClose = (tag: any) => {
    const index = childrenValues.value.findIndex((item) => item.id === tag.id);
    if (index !== -1) {
        childrenValues.value.splice(index, 1);
    }
    seleHig(childrenValues.value)
    if (childrenValues.value.length == 0) {
        isCheckAll.value = false;
    }
}
defineExpose({
    childrenValues
})
</script>

<style lang="scss" scoped>
.body {
    display: flex;
    justify-content: space-around;

    .el-divider--vertical {
        height: auto;
    }

    .left {
        width: 50%;
        position: relative;

        .el-tree {
            background: #F2F2F9;
        }

        .el-input {
            width: 70%;
            margin-bottom: 50px;
        }

        .el-button {
            position: absolute;
            top: 40px;
            right: 0;
            background: #060E83;
            color: #fff;
        }
    }

    .right {
        width: 50%;
        box-sizing: border-box;
        padding: 0 0 0 30px;
    }
}

:deep(.el-tree-node__content) {
    display: flex !important;
    align-items: center !important;
    height: 40px !important;
    cursor: pointer !important;
}

:deep(.el-tree-node__content):hover {
    background: none;
}

:deep(.el-tree-node:focus>.el-tree-node__content) {
    background: none;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #060E83;
    border-color: #060E83;
}

.el-tag--large {
    padding: 20px 20px;
    height: 32px;
    font-size: 16px;
}
</style>

下面示例是对接口数据以及修复的一些bug操作，可以相互对照一下有哪些不同

<template>
    <div class="body">

        <div class="left">
            <el-input v-model="filterText" placeholder="请输入要搜索的知识点" :offset="80" />
            <el-button type="primary" @click="selectAll" :disabled="Fselect" :offset="100">{{ checkAllText
            }}</el-button>
            <el-scrollbar>
                <el-tree ref="treeRef" class="filter-tree" :data="filteredData" :filter-node-method="(filterNode as any)"
                    :render-after-expand="false" multiple show-checkbox @check="handleNodeClick"
                    node-key="knowledgePointsNo" :props="{ label: 'knowledgePointsName' }" />
            </el-scrollbar>
        </div>
        <el-divider direction="vertical" />
        <div class="right">
            <p>已选{{ selectNum }}个</p>
            <el-scrollbar>
                <el-tag type="info" size="large" v-for="(el, i) in childrenValues" :key="i" style="margin: 5px 0 0 5px;"
                    @close="handleClose(el)" closable>
                    {{ el.knowledgePointsName }}
                </el-tag>
            </el-scrollbar>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { computed, ref, watch, onMounted } from 'vue'
import { ElTree } from 'element-plus'
import { KnowledgeList } from "@/api/teacher/question_blank";

interface Tree {
    id: number
    label: string
    children?: Tree[]
}
//是否全选
const isCheckAll = ref<boolean>(false);
const checkAllText = computed(() => isCheckAll.value ? '取消全选' : '全选');
const selectNum = ref<number>(0);
const filterText = ref<string>('')
const treeRef = ref<InstanceType<typeof ElTree>>()
const Fselect = ref<boolean>(false)
const data: Tree[] = ref([])



watch(filterText, (val) => {
    treeRef.value!.filter(val)
    seleHig(childrenValues.value)

    if (val.length == 0) {
        Fselect.value = false
    } else {
        Fselect.value = true
    }
})


//选中高亮
const seleHig = (arr: { knowledgePointsNo: string, knowledgePointsName: string }[]) => {
    const levelOneNodes = arr.map((node: Tree) => node.knowledgePointsNo);
    const levelTwoNodes = arr.flatMap((node: Tree) =>
        node.children ? node.children.map((child: Tree) => child.knowledgePointsNo) : []
    );
    defaultCheckedKeys.value = levelOneNodes.concat(levelTwoNodes);
    (treeRef.value as any).setCheckedKeys(defaultCheckedKeys.value);
}
const filterNode = (value: string, data: Tree) => {
    if (!value) return true
    return data.knowledgePointsName.includes(value)
}


const filteredData = computed(() => {
    const result = data.value.filter((node) => filterFn(filterText.value, node))
    return result
})



const filterFn = (filterText: string, node: Tree) => {

    // 如果节点匹配过滤器文本，则将其返回
    if (node.knowledgePointsName.includes(filterText)) {
        return true
    }
    // 否则，递归遍历该节点的所有子节点，查找匹配项
    if (node.children) {
        for (let i = 0; i < node.children.length; i++) {
            if (filterNode(filterText, node.children[i])) {
                return true
            }
        }
    }
    // 如果没有找到匹配项，则返回false
    return false
}






//选中的数据操作

/**
 * @param { id: number, label: string }>获取ref内选中的children的值
 */
const childrenValues = ref<{ knowledgePointsNo: string, knowledgePointsName: string }[]>([])
const handleNodeClick = () => {
    const checkedNodes = (treeRef.value as any).getCheckedNodes({ leafOnly: false });
    childrenValues.value = checkedNodes.map(({ knowledgePointsNo, knowledgePointsName, children }: Tree) => {
        if (!children || children.length === 0) {
            return { knowledgePointsNo, knowledgePointsName };
        }
        return { knowledgePointsNo, knowledgePointsName, children };
    });
}

//默认选中的节点
const defaultCheckedKeys = ref<number[]>([]);

const selectAll = (): void => {
    class Person {
        getChildren = async (): Promise<void> => {
            try {
                isCheckAll.value = !isCheckAll.value;
                if (isCheckAll.value) {
                    seleHig(filteredData.value);
                    handleNodeClick();
                } else {
                    defaultCheckedKeys.value = [];
                    (treeRef.value as any).setCheckedKeys([]);
                    childrenValues.value = []
                }
            } catch (error) {
                // 在这里处理错误
                console.error('Error occurred:', error);
            }
        }
    }
    new Person().getChildren();
}



//监听childrenValues与data--children的差距
watch(childrenValues, (newVal: Tree[]) => {
    selectNum.value = newVal.length
    const childrenVa = filteredData.value.flatMap(node => {
        if (node.children && node.children.length > 0) {
            return node.children;
        } else {
            return [node]; // 将当前父级节点作为选中项
        }
    });
    if (newVal.length == childrenVa.length) {
        // 全选了
        isCheckAll.value = true;
    } else {
        // 部分选中或全没选
        isCheckAll.value = false;
    }
})
const handleClose = (tag: any) => {
    const index = childrenValues.value.findIndex((item) => item.knowledgePointsNo === tag.knowledgePointsNo);
    if (index !== -1) {
        childrenValues.value.splice(index, 1);
    }
    selectNum.value = childrenValues.value.length
    seleHig(childrenValues.value);

    isCheckAll.value = false;
}
onMounted(() => {
    KnowledgeList({
        "knowledgePointsName": "",
        "pageNum": "",
        "pageSize": ""
    }).then(({ data: { data: { list } } }) => {
        data.value = list
    })
})
defineExpose({
    childrenValues
})
</script>

<style lang="scss" scoped>
.body {
    display: flex;
    justify-content: space-around;
    height: 50vh;



    .el-divider--vertical {
        height: auto;
    }

    .left {
        .el-scrollbar {
            width: 100%;
            height: 43.5vh;
        }

        width: 50%;
        position: relative;

        .el-tree {
            background: #F2F2F9;
        }

        .el-input {
            width: 70%;
            margin-bottom: 50px;
        }

        .el-button {
            position: absolute;
            top: 40px;
            right: 0;
            background: #060E83;
            color: #fff;
        }
    }

    .right {
        width: 50%;
        box-sizing: border-box;
        padding: 0 0 0 30px;
    }
}

:deep(.el-tree-node__content) {
    display: flex !important;
    align-items: center !important;
    height: 40px !important;
    cursor: pointer !important;
}

:deep(.el-tree-node__content):hover {
    background: none;
}

:deep(.el-tree-node:focus>.el-tree-node__content) {
    background: none;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #060E83;
    border-color: #060E83;
}

:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
    background-color: #060E83;
    border-color: #060E83;
}

.el-tag--large {
    padding: 20px 20px;
    height: 32px;
    font-size: 16px;
}
</style>

yasuo56
关注
vue2/3 - element组件库el-tree树形控件实现一键全选/一键反选取消/全部收起/全部折叠/上下级父子是否联动功能，vue+element Tree树点击按钮全选和反选，收起折叠树结构
高级前端工程师
03-20 2903
vue2，vue3，elementUI，element plus，Tree树形控件，el-tree，el-tree实现多选、反选，tree组件展开/折叠及全选/分组全选实现，element的树表格和树形控件折叠展开方法，element tree 如何全部展开、全部折叠，elmentui中树结构el-tree 多选功能，element el-tree折叠收缩，el-tree实现一键全选、反选功能，element Tree 树形控件 折叠、展开 全选、清空，树形结构全选、取消全选，展开收起，element中Tr
vue3 - element-plus树形控件el-tree快捷全选、反选、清除选择功能，Tree树形控件组件实现点击按钮一键全勾选和一键全取消勾选快捷按钮（详细示例运行源码，一键复制开箱即用！）
高级前端工程师
03-11 4597
vue3，element plus，el-select，树形组件，Tree树形控件，vue3 elementplus如何实现tree树组件一键全选和反选功能，el-select实现全选、取消全选效果，树形下拉选择器组件，element-plus tree树形全选和反选，el-tree实现一键全选、反选功能el-tree 全选，el-tree实现全选/全不选，tree全选全不选,获取所有选中，清空el-tree复选框选中项，el-select下拉框多选实现全选的实现，一键全选多个树形，el-tree树增加全选
el-tree搜索父节点，父子节点一起展示
敲代码无敌小奶龙的博客
04-22 865
el-tree搜索父节点，父子节点一起展示
element中Tree 树形控件实现多选、展开折叠、全选全不选、父子联动、默认展开、默认选中、默认禁用、自定义节点内容、可拖拽节点、手风琴模式
weixin_41549971的博客
01-05 3837
element中Tree 树形控件实现多选、展开折叠、全选全不选、父子联动、默认展开、默认选中、默认禁用、自定义节点内容、可拖拽节点、手风琴模式。
Elementui树形列表控件tree-box
最新发布
weixin_45148467的博客
10-09 1530
这个组件通过el-tree组件展示树形结构设备列表，支持节点点击、展开、过滤等功能，并通过多种方法和事件与父组件进行交互。数据通过后端接口获取并动态更新树结构，具有良好的用户体验和扩展性。
利用el-tree实现搜索的联动功能
weixin_46156770的博客
01-24 1951
今天公司做项目碰见这样一个需求 点击搜索，出现搜索框，左中右出现联动效果一个选中，其他都选中，右侧出现选中的内容，搞了三天终于可以了 html <el-card> <div class="distribution"> <div class="people"> <div class="search"> <el-input placeho
el-tree 关键字搜索
m0_56219678的博客
04-25 2114
el-tree 进行关键字搜索
el-tree搜索的使用
敲代码无敌小奶龙的博客
12-11 1093
el-tree搜索的使用
el-tree实现搜索的两种方式
Zwq8023520的博客
04-10 720
第二种方法使用filter进行过滤，简单便捷。仅用一行代码实现，非常便捷。需要实现对人员进行搜索，第一种方法使用了递归，显得十分臃肿。
element tree 搜索
qq_40295815的博客
07-03 531
【代码】element tree 搜索。
el-tree实现el-transfer(穿梭框)的效果代码（全）
04-25
2、勾选全选，则资源全部添加到右侧，左侧的则显示为空 3、保存后点击编辑，左侧显示未分配的资源，右侧显示已分配的资源 4、后台给到的数据是：所有的资源（多维数组）和已分配的资源（一维数组，包含（半勾选）...
element-ui tree树形控件:default-checked-keys 设置空数组 默认还是选中状态问题
01-20
在Element UI库中，Tree组件是一个非常常用的控件，它用于构建层次结构的数据展示，比如在权限管理或者文件目录等场景。在这个问题中，开发者遇到了一个关于`default-checked-keys`属性的问题，即当尝试将该属性设置...
tree结构穿梭 vue_结合el-tree和el-transfer搞一个树形穿梭框
weixin_33571513的博客
12-31 2984
最近遇到个需求，穿梭框中的内容是树形结构的数据。查看elementUI的transfer组件是不支持树形结构的数据，也就不能直接使用了。但是el-tree组件支持啊，那如果让tree组件和transfer组件结合一下岂不完美????。准备clone一份element的源码，找到package/tansfer/src文件夹，里面的vue文件就是我们的目标。复制一份出来到自己的项目(同时复制mixins里的...
【el-tree查询并高亮】vue使用el-tree组件，搜索展开并选中对应节点，高亮搜索的关键字，过滤后高亮关键字，两种方法
seeeeeeeeeee的博客
07-22 3902
2，差的时候调用这个this.$refs.tree2.filter(this.title);里面的title就是你搜索的值。1，在tree标签上加上这句话:filter-node-method="filterNode"这个方法复制下面的，只需要把data.title修改成你字段的名字就行，比如你的字段叫name就是data.name。这里的逻辑就是通过递归循环把所有和关键字匹配的节点筛选出来。这个是用的官方文档的那个过滤方式，可以参考官方文档看一下。效果图这样的，会把所有的有这些关键字的节点都展开。
关于element-plus的el-tree 组件常用属性及api及控制可拖动层级，el-tree 自定义全选 单选数据 小笔记
努力飞起的菜鸟
03-19 2848
1 需要控制最大层级 tree 当前到第几可拖动 :allow-drop="allowDrop"2 @check-change="handleCheckbranch" 方法收集选择标识。拖拽时判定目标节点能否成为拖动目标位置。3 拖动配置激活Ui 样式 自定义。
elementplus el-tree树型结构多选，选中全部子节点，父节点也默认选中，但是子节点取消勾选不会影响父节点勾选状态
petrel_921的博客
07-30 1177
子节点选中时父节点也会选中，子节点取消选中不影响父节点选中状态，实现选中父节点后，子节点全部选中，反之也会全部取消选中；但是子节点全部取消，父节点也会取消。
小白日记：el-select 和el-tree 实现搜索
m0_58867441的博客
07-19 703
el-select 和el-tree 实现搜索
el-tree组件使用filter-node-method方法搜索过滤节点，不展示子节点的问题以及中英文过滤
cyj0919的博客
03-29 1744
这个方法有三个参数，value:输入的搜索词，data是当前数据，node是当前树形节点。toLowerCase()实现中英文过滤。
element-plus el-tree使用
m0_53266704的博客
07-01 1846
element-plus el-tree使用
element-plus的el-tree全选，清空，反选
08-27
Element Plus 的 `el-tree` 组件提供了一个高度可定制的数据驱动树形控件，其中包含丰富的功能，包括全选、清空和反选操作。以下是关于这些功能的基本解释： 1. **全选** (All Select): 可以通过点击顶部节点的复选框，或者设置相应的事件处理器，实现树中所有子节点的选中状态同步更新。这通常需要配合 `check` 或 `check-strictly` 属性以及 `default-checked-keys` 或 `default-checked` 数据属性来配置。 2. **清空选择** (Clear Selection): 当用户希望清除当前的所有选中项时，可以触发 `clearSelection` 方法或者监听 `@selection-change` 事件，然后手动将 `checkedKeys` 或者全局的 `selectedKeys` 设置为空数组。 3. **反选** (Invert Selection): 如果希望所有非选中的项变成选中，而选中的项变为未选中，同样可以使用 `clearSelection` 然后添加所有其他非选中的节点到 `checkedKeys` 中，或者在事件处理器中对当前选中的键进行取反操作。 要实现上述操作，你需要在组件的实例上绑定这些方法，并根据实际需求调用它们。例如： ```html <template> <el-tree :data="treeData" @selection-change="handleSelectionChange"> <!-- ... --> </el-tree> </template> <script> export default { methods: { handleSelectionChange(selectedKeys) { // 全选、清空、反选处理 if (this.toggleAll) { selectedKeys.length ? this.clearSelection() : this.selectAll() } else { // 反选逻辑 const allKeys = this.treeData.map(item => item.key); selectedKeys.length && this.checkKey(notifyKeys(allKeys, selectedKeys)) } }, selectAll() { // 设置所有节点选中 this.$refs.tree.setCheckedKeys([...allKeys]) }, clearSelection() { this.$refs.tree.setCheckedKeys([]) }, checkKey(keys) { keys.forEach(key => this.$refs.tree.setChecked(key, true)) } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值