【Vue-Element-Admin】table排序

背景

对表格排序大概分两种，一种是仅针对于当前界面排序(前端排序)，另一种是对全量数据进行排序(后端排序)

页面排序(前端排序)

通过 Table 的default-sort属性设置默认的排序列和排序顺序;
在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :default-sort = "{prop: 'date', order: 'descending'}"
    >
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>
  </el-table>
</template>
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

全量排序(后端排序)

如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @sort-change="sortChage"
    >
    <el-table-column
      prop="date"
      label="日期"
      sortable="custom"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable="custom"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      sortable="custom"
      :formatter="formatter">
    </el-table-column>
  </el-table>
</template>

<script>
  export default{
    return{
        listQuery:{
            //page:1,
            //limit:20,
            //如果想兼容按条件导出，可以定义查询条件
            date:undefined,
            name:undefined,
            address:undefined,
        }
    },
    methods: {
      formatter(row, column) {
        return row.address;
      },
      getList(){
        this.listLoading=true
        findListByPage(this.listQuery).then(response=>{
          this.list=response.data['items']
          this.total=response.data['total']
          setTimeOut(()=>{
            this.listLoading=false
          },1.5*1000)
        })
      },
      handlerFilter(){
        this.listQuery.page=1
        this.getList()
      },
      sortChage(data){
        const {prop,order} = data
        this.sortByColumn(prop,order);
      },
      sortByColumn(prop,order){
        if (order === 'ascending'){
          this.listQuery.sort='+'+prop
        }else{
          this.listQuery.sort='-'+prop
        }
        this.handlerFilter()
      }
    }
 }
</script>
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