ElementUI中统计Table筛选结果数量

eletable

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

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

1
2
3


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

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

1
2
3


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

4、监听计算表格数量

1
2
3
4
5


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

5、过滤事件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


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、隐藏掉组件自带的全部枚举，使用自定义的

1
2
3


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

7、单页面的完整代码

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135


<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>

文章目录