关于前端: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>