elementui el-tree多层级数据递归根据条件筛选(禁用指定节点)

项目中用的是elementui的tree组件,要实现的效果是根据关键字去筛选过滤出禁用的节点;

所以首先需要的是对树结构数据进行整合:

export function deepFilter3(nodes, key, query) {

    Array.isArray(nodes) &&

        nodes.forEach((item) => {

            if (item[key].includes(query)) {

                item.disabled = true;

            }

            deepFilter3(item.children, key, query);

        });

    return nodes;

}

其次在树节点中动态添加禁用css:

 

 

<template> <div class="app-container"> <!-- 操作工具栏 --> <div class="mb-4"> <el-button type="primary" @click="showFormDialog()">新增分类</el-button> </div> <!-- 树形表格 --> <el-table :data="tableData" row-key="id" :tree-props="{children: 'children'}" border style="width: 100%" > <el-table-column prop="id" label="ID" width="80"> <template #default=“{ row }”> <template v-if=“row.children && row.children.length > 0”> {{ row.id }} </template> <span v-else class=“empty-id”></span> </template> </el-table-column> <el-table-column prop=“title” label=“分类名称” /> <el-table-column label=“操作” width=“180” align=“center”> <template #default=“{ row }”> <el-button type=“primary” size=“small” @click=“showFormDialog(row.id)” >修改</el-button> <el-button type=“danger” size=“small” @click=“handleDelete(row.id)” >删除</el-button> </template> </el-table-column> </el-table> <!-- 表单对话框 --> <el-dialog v-model="formVisible" :title="currentId ? '修改分类' : '新增分类'" width="30%" > <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" > <el-form-item label="分类名称" prop="title"> <el-input v-model="form.title" placeholder="请输入分类名称" /> </el-form-item> </el-form> <template #footer> <el-button @click="formVisible = false">取消</el-button> <el-button type="primary" @click="submitForm">确认</el-button> </template> </el-dialog> </div> </template>要求点击新增分类时弹出的对话框里再加一个上级选择,用select树形结构数据展示,给出vue3的全部代码
最新发布
03-22
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值