结合el-input、el-select实现纯前端过滤树形el-table数据

样式图示

1.搜索实现方法

bash 复制代码
const searchBtn = async () => {
    // 获取table列表数据接口
    const res = await Api.menuList({paging: false})
    if (res.code === 200) {
        // 把树形结构转成扁平结构
        let result = treeToArray(res.data)
        // 处理搜索框中数据进行table显示项过滤
        if(commonData.searchParams.menuName || commonData.searchParams.menuCode || commonData.searchParams.status ) {
            // 过滤后给el-table重新赋值
            commonData.tableData = result.filter(item => {
                /**
                 * menuName 搜索框名称数据项
                 * menuCode 搜索框编码数据项
                 * status 搜索框普通用户数据项
                 */
                const {menuName, menuCode, status} = commonData.searchParams
                const isMenuName = menuName ?  item.menuName.includes(menuName):true
                const isMenuCode = menuCode?  item.menuCode.includes(menuCode):true
                // item.status == status 次数判断是因为 status只会出现 1 或者 2
                const isStatus = status ? item.status == status :true
                return isMenuName && isMenuCode && isStatus
            })
            // 调用方法让table树形结构展开
            unfoldBtn()
        } else {
            // 重新加载table数据接口
            loadData()
        }
    }
}

2.过滤后实现效果

相关推荐
猫头虎-前端技术25 分钟前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫25 分钟前
探索 CSS 过渡:打造流畅网页交互体验
前端·css
元亓亓亓25 分钟前
JavaWeb--day1--HTML&CSS
前端·css·html
β添砖java25 分钟前
CSS的文本样式
前端·css
前端小趴菜0526 分钟前
css - 滤镜
前端·css
祈祷苍天赐我java之术26 分钟前
理解 CSS 浮动技术
前端·css
索迪迈科技28 分钟前
Flex布局——详解
前端·html·css3·html5
咔咔一顿操作30 分钟前
【CSS 3D 实战】从零实现旋转立方体:理解 3D 空间的核心原理
前端·css·3d·css3
DONG91332 分钟前
深度解析CSS单位与媒体查询:构建现代化响应式布局的核心技术
前端·css·html·css3·媒体
一只小风华~38 分钟前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架