el-table实现后台排序

在实际开发工作中,经常会遇到需要排序的情况,前端排序可直接利用el-table的sortable属性,后台排序需要自定义排序方法,如下: 

 <el-table
     ref="multipleTable" 
     :data="tableData"
     tooltip-effect="dark"
     style="width: 100%"
     @sort-change='handleSort' // 监听sort-change,自定义排序事件
     border
 >
     <el-table-column
      prop="name"
      label="用户名称"
      sortable='custom' // 必须设置,将需要排序的列上设置sortable为custom
     >
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄"
    >
    </el-table-column>
 </el-table>
handleSort({column,order}) {
    console.log(order) // 升序还是降序
    console.log(column) // 排序相关属性
    // 在此处调用接口即可
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-tableElement UI框架中的一个表格组件,可以用来展示数据。如果需要实现拖拽排序,可以使用el-table内置的sortable属性和drag-sorting事件。 sortable属性可以让表格的行拥有拖拽排序的能力,使用方法如下: ```html <el-table :data="tableData" :sortable="true"> <!-- 表格列 --> </el-table> ``` drag-sorting事件可以监听行拖拽时的变化,使用方法如下: ```html <el-table :data="tableData" :sortable="true" @drag-sorting="handleDragSort"> <!-- 表格列 --> </el-table> ``` 在事件处理函数中,可以通过参数获取拖拽前和拖拽后的行的数据,然后进行排序操作: ```javascript methods: { handleDragSort(from, to) { const movedData = this.tableData.splice(from, 1)[0]; this.tableData.splice(to, 0, movedData); } } ``` 以上代码中,我们首先通过splice方法将拖拽前的行数据移除,然后再通过splice方法将该行数据插入到拖拽后的位置。 完整的代码示例: ```html <template> <el-table :data="tableData" :sortable="true" @drag-sorting="handleDragSort"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="gender" label="Gender"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: 'John', age: 20, gender: 'Male' }, { name: 'Mary', age: 25, gender: 'Female' }, { name: 'Tom', age: 18, gender: 'Male' }, ] } }, methods: { handleDragSort(from, to) { const movedData = this.tableData.splice(from, 1)[0]; this.tableData.splice(to, 0, movedData); } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值