ElementUI中统计Table筛选结果数量

左手的ㄟ右手 2023-06-10 06:23 520阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70]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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTA4MDQz_size_16_color_FFFFFF_t_70]: /images/20230531/59d3d5453cb348c799f275e60f022bf1.png