【Vue-Element-Admin】table排序

月月吃喝

已于 2023-09-26 10:43:11 修改

阅读量896

点赞数 2

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2023-09-21 17:18:18 首次发布

本文链接：https://blog.csdn.net/weixin_43840640/article/details/133136517

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了在Vue应用中使用ElementUI的el-table组件实现前端和后端表格排序的方法，包括默认排序、列级排序以及通过sort-change事件触发后端请求排序数据的过程。

摘要由CSDN通过智能技术生成

背景

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

页面排序(前端排序)

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

全量排序(后端排序)

如果需要后端排序，需将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>