element-ui在table分页的情况下实现多页筛选(单列/多列)-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui在table分页的情况下实现多页筛选(单列/多列)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

element-ui官网提供的筛选样例只能对当前页的数据进行筛选，但我们用它提供的filter-change事件和column-key属性来实现多页筛选

element-ui在table分页的情况下实现多页筛选(单列/多列)

在element-ui官网提供的筛选样例的基础上，

el-table 标签上加 @filter-change="filterChange"

在要筛选的那一列的 el-table-column 标签上加 column-key="tag"

去掉 el-table-column 标签上的 :filter-method="filterTag"

代码如下：文章来源地址https://www.toymoban.com/news/detail-407884.html

    <el-table
      ref="filterTable"
      :data="tableData"
      style="width: 100%"
      @filter-change="filterChange"
    >
      <el-table-column
        column-key="tag"
        prop="tag"
        label="标签"
        width="100"
        :filters="[
          { text: '家', value: '家' },
          { text: '公司', value: '公司' },
        ]"
        filter-placement="bottom-end"
      >
      </el-table-column>

methods中：

    // 筛选状态
    filterChange(filter) {
    // 修改传给后端接口的参数，并重新调用接口
      this.queryParams.tag = filter.tag.join(',')
      this.getList()
    },

多列筛选

只需要在单列筛选的基础上，

给不同需要筛选的列设置不同的 column-key ，

在filter-change的回调中判断 filter 等于哪个 column-key

代码如下：

    <el-table
      ref="filterTable"
      :data="tableData"
      style="width: 100%"
      @filter-change="filterChange"
    >

      <el-table-column
        column-key="tag"
        prop="tag"
        label="标签"
        width="100"
        :filters="[
          { tex

到了这里，关于element-ui在table分页的情况下实现多页筛选(单列/多列)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！