vue+element ui 表格添加多个搜索条件筛选（前端查询）

filterList 为筛选后的数据，可以重新给tableData赋值，赋值后如果遇到表格数据不刷新的情况，可以给table加上一个随机的key。这样可以解决重新赋值页面不刷新的情况。点击查询按钮调用下面的方法。

yuwenwenwenwenyu

5885人浏览 · 2023-06-20 15:06:11

yuwenwenwenwenyu · 2023-06-20 15:06:11 发布

vue+element ui 表格添加多个搜索条件筛选（前端查询）

当数据量小的时候，可以在前端完成搜索查询的功能，核心代码如下：
点击查询按钮调用下面的方法

handleSearch() {
    // 表单数据格式
    // searchForm:{field1:'11',field2:'22'}
    let form = this.searchForm;
    // 表格数据源
    let tableList = this.tableData;
    // 筛选后的数据
    const filterList = tableList.filter((item) => {
         return Object.values(form).every((key, index) => {
             return item[Object.keys(form)[index]].includes(key)
         })
    })
    this.tableData = filterList 
}

filterList 为筛选后的数据，可以重新给tableData赋值，赋值后如果遇到表格数据不刷新的情况，可以给table加上一个随机的key。这样可以解决重新赋值页面不刷新的情况。

<el-table class="table" :data="tableData" :key="itemKey"></el-table>

handleSearch() {
    this.itemKey = Math.random();
    // 表单数据格式
    // searchForm:{field1:'11',field2:'22'}
    let form = this.searchForm;
    // 表格数据源
    let tableList = this.tableData;
    // 筛选后的数据
    const filterList = tableList.filter((item) => {
         return Object.values(form).every((key, index) => {
             return item[Object.keys(form)[index]].includes(key)
         })
    })
    this.tableData = filterList 
}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^