el-table sortable 调后端接口排序

1.table上要加 @sort-change="sortChange"

2.需要排序的列加上  sortable="custom" 不然不生效


<el-table :data="dataList" @sort-change='changeSort'>
  // 需要排序的列添加 sortable="custom" 后端排序
  <el-table-column label="创建时间" prop="createTime" sortable="custom" />  
</el-table>

// 排序的方法	每次排序会触发
   changeSort(val) {
     const order = val.order
     if (order === 'ascending') {
       this.query.sort = 'id' + ',asc'
      } else {
        this.query.sort = 'id' + ',desc'
      }
      this.$nextTick(() => {
        // 重新从接口拿数据
        this.getOrderList(0, this.pageSize)
      })
    },

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果需要使用后端排序,可以将 el-table-column 的 sortable 属性设置为 'custom',并在 el-table 上绑定 @sort-change 事件。在事件处理方法中,你可以获取到排序的字段和方式,然后通过 AJAX 请求将排序后的数据从后端获取到并更新到表格中。以下是一个示例代码: ``` <template> <el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}" @sort-change="handleSortChange"> <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="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' } ] } }, methods: { handleSortChange({ prop, order }) { // 发送 AJAX 请求,获取排序后的数据 // 更新 tableData 数据 } } } </script> ``` 在 handleSortChange 方法中,你可以根据 prop 和 order 的值发送 AJAX 请求,将排序后的数据从后端获取到并更新到 tableData 数据中,然后表格会自动更新展示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值