element中table全部数据进行筛选和排序

筛选

1、@filter-change 要写在table根元素，也就是<el-table @filter-change="filterChange"></el-table>
2、需要筛选的项，要写上 :column-key=" 'aaa' "
3、要搜索全局，就要去掉对应筛选项的 :filter-method="xx"。

排序

1、首先有两个数组tData 和tableData。
2、tableData用来放当前页的数据，tData用来放所有数据。
3、为表格绑定@sort-change事件，当点击表头的排序icon时，调用sort_change方法,该方法内部调用的sortFun方法可以为tableData进行排序，showedData显示排好序的前四条数据。

<template>
  <div>
    <el-table :data="tableData | dataslice(page, pageSize)" @filter-change="filterChange" @sort-change="sortChange">
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        align="center"
        :fixed="item.fixed"
        :prop="item.prop"
        :label="item.label"
        :column-key="item.key"
        :min-width="item.width"
        :sortable="item.sortable"
        :show-overflow-tooltip="item.toolTip"
        :filters="item.filters ? Tfilters(item.prop) : null"
      />
      <!-- filters：不需要筛选的项要设置为null，不然会报错 -->
    </el-table>
    <el-pagination
      :current-page="page"
      :page-sizes.sync="pagesizes"
      :page-size.sync="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    />
  </div>
</template>

<script>
export default {
  filters: {
    dataslice(array, page, limit) {
      const offset = (page - 1) * limit
      const newdata = offset + limit >= array.length ? array.slice(offset, array.length) : array.slice(offset, offset + limit)
      return newdata
    }
  },
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      tData: [], // 请求到数据后tabledata和tData都要进行赋值
      columns: [
        {
          prop: 'a',
          label: '测试1',
          width: '120',
          fixed: true // 是否固定列
        },
        {
          prop: 'b',
          label: '测试2',
          width: '120',
          filters: true, // 是否筛选
          key: 'b', // 全部数据进行筛选要设置column-key
          sortable: 'custom' // 全部数据排序要设置成custom
        },
        {
          prop: 'c',
          label: '测试3',
          width: '120',
          filters: true,
          key: 'c',
          sortable: 'custom'
        },
        {
          prop: 'd',
          label: '测试4',
          width: '120',
          filters: true,
          key: 'd',
          sortable: 'custom'
        }
      ],
      filtList: []
    }
  },
  computed: {
    /* 筛选的下拉选择项进行获取 */
    Tfilters() {
      return (prop) => {
        let lis = []
        const flis = []
        this.tableData.forEach(item => {
          lis.push(item[prop])
        })
        lis = Array.from(new Set(lis))
        lis.forEach(item => {
          const obj = {}
          obj.text = item
          obj.value = item
          flis.push(obj)
        })
        return flis
      }
    }
  },
  methods: {

    /* 全部数据排序 */
    sort_change(column) { // column是个形参，具体查看element-ui文档
      this.page = 1 // return to the first page after sorting
      this.total = this.tableData.length
      this.tableData = this.tableData.sort(this.sortFun(column.prop, column.order === 'ascending'))
    },
    sortFun(attr, rev) {
      // 第一个参数传入info里的prop表示排的是哪一列，第二个参数是升还是降排序
      if (rev === undefined) {
        rev = 1
      } else {
        rev = (rev) ? 1 : -1
      }
      return function(a, b) {
        a = a[attr]
        b = b[attr]
        if (a < b) {
          return rev * -1
        }
        if (a > b) {
          return rev * 1
        }
        return 0
      }
    },

    /* 前端处理全部数据筛选 */
    fliterChange(filters) {
      const lis = Object.values(filters)[0]
      const key = Object.keys(filters)[0]

      /* 将筛选条件添加到数组中 */
      if (this.filtList.length === 0) {
        this.filtList.push(filters)
      } else {
        const index = this.filtList.findIndex((item) => key in item)
        if (index !== -1) {
          this.filtList.splice(index, 1, filters)
        } else {
          this.filtList.push(filters)
        }
      }

      /* 筛选按钮进行筛选 */
      if (lis.length > 0) {
        this.tableData = this.tableData.filter(data => {
          return lis.includes(data[key])
        })
        this.total = this.tableData.length
        return this.tableData
      }

      /* 点击了重置按钮 */
      this.tableData = this.tData // 先拿到所有的数据

      // 把当前重置的数据过滤掉
      this.filtList = this.filtList2.filter(item => Object.values(item)[0].length !== 0)
      // 如果数组中还有筛选条件，进一步进行筛选
      if (this.filtList.length > 0) {
        this.filtList.forEach(item => {
          const lis = Object.values(item)[0]
          const key = Object.keys(item)[0]
          this.tableData = this.tableData.filter(data => {
            return lis.includes(data[key])
          })
        })
        this.total = this.tableData.length
        return this.tableData
      }
      // 筛选数组中没有数据了，拿到全部数据
      this.tableData = this.tData
      this.total = this.tableData.length
      return this.tableData
    }
  }
}
</script>

<style>
</style>