前端对表格数据进行条件查询过滤

form.on('submit(search)', function (data) {
    var name = data.field.searchName;
    var code = data.field.searchCode;
    var type = formSelects.value('typeSelect', 'val'); // 多选框
    var typeArray = [];
    if (type != "") {
        typeArray = type.split(',');
    }

    var nameList = [];
    var codeList = [];
    var typeList = [];
    var wrapperList = [];

    layerGroupRoot.forEach(function (item) {
        if (!isEmpty(item.name) && name != "" && item.name.indexOf(name) > -1) {
            nameList.push(item);
        }
        if (!isEmpty(item.code) && code != "" && item.code.indexOf(code) > -1) {
            codeList.push(item);
        }
        if (!isEmpty(item.type) && typeArray.length != 0 && typeArray.includes(item.type)) {
            typeList.push(item);
        }
    })

    if (nameList.length != 0) {
        wrapperList.push(nameList);
    }
    if (codeList.length != 0) {
        wrapperList.push(codeList);
    }
    if (typeList.length != 0) {
        wrapperList.push(typeList);
    }

    if (wrapperList.length == 0) {
        if(name == "" && code == "" && typeArray.length == 0){
            initTable(layerGroupRoot); // 未填写查询条件则查询所有
        }else{
            initTable(wrapperList); // 填写查询条件但没找到
        }
    } else { // 取交集
        var selectIdList = [];
        wrapperList[0].forEach(function (item) {
            selectIdList.push(item.id);
        });
        for (var i = 0; i < wrapperList.length - 1; i++) {
            var tempIdList = [];
            wrapperList[i + 1].forEach(function (item) {
                if (selectIdList.includes(item.id)) {
                    tempIdList.push(item.id);
                }
            });
            selectIdList = tempIdList;
        }
        var selectList = [];
        wrapperList[0].forEach(function (item) {
            if (selectIdList.includes(item.id)) {
                selectList.push(item);
            }
        });
        initTable(selectList);
    }
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现 Element Plus 表格上方带有搜索框和查询按钮的模糊查询,你可以按照以下步骤进行操作: 1. 在模板添加搜索框和查询按钮: ```html <template> <div> <el-input v-model="searchText" placeholder="请输入关键字"></el-input> <el-button type="primary" @click="handleSearch">查询</el-button> <el-table :data="tableData"> <!-- 表格列的定义 --> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <!-- 其他列的定义 --> </el-table> </div> </template> ``` 2. 在 `data` 函数添加搜索框的绑定值和表格数据: ```js data() { return { searchText: '', // 搜索框的绑定值 tableData: [ { name: '张三', age: 20 }, { name: '李四', age: 25 }, { name: '王五', age: 30 }, // 其他数据 ], }; }, ``` 3. 在 `methods` 添加 `handleSearch` 方法来处理查询操作: ```js methods: { handleSearch() { const searchText = this.searchText.trim(); // 获取搜索框的关键字 if (!searchText) { // 如果关键字为空,则显示全部数据 this.filteredData = this.tableData; return; } // 使用过滤方法过滤数据 this.filteredData = this.tableData.filter(item => { return Object.values(item).some(value => { return String(value).includes(searchText); }); }); }, }, ``` 在这里,我们定义了一个 `handleSearch` 方法来处理查询操作。在方法,我们首先获取搜索框的关键字,并使用 `trim` 方法去除两端空格。如果关键字为空,则显示全部数据;否则,我们使用 `filter` 方法对表格数据进行过滤过滤的方法为:对每个对象的所有属性值进行检查,如果任何一个属性值包含了关键字,则返回 `true`,否则返回 `false`。 4. 在表格组件使用过滤后的数据: ```html <el-table :data="filteredData || tableData"> <!-- 表格列的定义 --> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <!-- 其他列的定义 --> </el-table> ``` 在这里,我们使用 `filteredData` 来作为表格数据源,如果 `filteredData` 为空,则使用原始的 `tableData`。这样可以保证在没有进行查询操作时,表格显示全部的数据

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值