ElementUI中统计Table筛选结果数量

1、el-table标签栏添加@filter-change="filterChange"

2、需过滤的列el-table-column加上

:filters="type"
:filter-multiple='false'
filter-placement='right-end'

3、初始化页面界面显示数据

created () {
    this.tableData = this.tableTempData // tableTempData为临时静态数据
}

4、监听计算表格数量

computed: {
    num: function () {
        return this.tableData.length
    }
}

5、过滤事件

filterChange (filters) {
    for (const key in filters) {
        if (filters[key].length > 0) {
            // 配合data中定义的数据枚举数组type，确定操作的是那一列
            if (filters[key][0].substr(0, 1) === 'p') {
                let queryParams = null
                // 获取选中的枚举值
                queryParams = filters[key][0].substr(1, 2)
                // 1、用的是静态数据，根据枚举值确定tableData
                // 2、如果用的是http请求的话，将queryParams作为参数去获取结果集，赋值给tableData即可
                if (queryParams === '') {
                    this.tableData = this.tableTempData
                } else {
                    this.tableData = this.tableTempData.filter((item) => item.status === queryParams)
                }
            }
        }
    }
}

6、隐藏掉组件自带的全部枚举，使用自定义的

.el-table-filter__list li:first-child {
  display: none;
}

7、单页面的完整代码

<template>
  <div class="ele-table">
    <h3>数量（{{num}}）</h3>
    <el-table ref="filterTable"
              :data="tableData"
              style="width: 100%"
              @filter-change="filterChange">
      <el-table-column prop="date"
                       label="日期"
                       width="180">
      </el-table-column>
      <el-table-column prop="name"
                       label="姓名"
                       width="180">
      </el-table-column>
      <el-table-column prop="status"
                       label="订单状态"
                       width="180"
                       column-key="status"
                       :filters="type"
                       :filter-multiple='false'
                       filter-placement='right-end'>
        <template slot-scope='scope'>
          <span v-if='scope.row.status === "1"'>状态01</span>
          <span v-if='scope.row.status === "2"'>状态02</span>
          <span v-if='scope.row.status === "3"'>状态03</span>
          <span v-if='scope.row.status === "4"'>状态04</span>
        </template>
      </el-table-column>
      <el-table-column prop="address"
                       label="地址"
                       :formatter="formatter">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      tableTempData: [{
        date: '2016-05-02',
        name: '王小虎',
        status: '1',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-04',
        name: '王小虎',
        status: '2',
        address: '上海市普陀区金沙江路 1517 弄',
      }, {
        date: '2016-05-01',
        name: '王小虎',
        status: '2',
        address: '上海市普陀区金沙江路 1519 弄',
      }, {
        date: '2016-05-03',
        name: '王小虎',
        status: '4',
        address: '上海市普陀区金沙江路 1516 弄',
      }],
      type: [
        {
          text: '全部',
          value: 'p'
        }, {
          text: '状态01',
          value: 'p1'
        }, {
          text: '状态02',
          value: 'p2'
        },
        {
          text: '状态03',
          value: 'p3'
        }, {
          text: '状态04',
          value: 'p4'
        }
      ],
    }
  },
  created () {
    this.tableData = this.tableTempData
  },
  computed: {
    num: function () {
      return this.tableData.length
    }
  },
  methods: {
    formatter (row) {
      return row.address
    },
    filterChange (filters) {
      for (const key in filters) {
        if (filters[key].length > 0) {
          if (filters[key][0].substr(0, 1) === 'p') {
            let queryParams = null
            queryParams = filters[key][0].substr(1, 2)
            if (queryParams === '') {
              this.tableData = this.tableTempData
            } else {
              this.tableData = this.tableTempData.filter((item) => item.status === queryParams)
              console.log(queryParams, this.tableData, filters)
            }
          }
        }
      }
    }
  }
}
</script>


<style>
.el-table-filter__list li:first-child {
  display: none;
}
</style>
<style scoped>
.ele-table {
  margin-top: 20px;
}
h3 {
  text-indent: 2rem;
}
.el-table--fit {
  margin-top: 20px;
  padding: 0 30px 30px 30px;
  border-top: 1px solid #ccc;
}
</style>