el-table分页后排序功能错误

在el-table中加上

@sort-change='sortChange'

在el-table-column中加上

sortable='custom'

然后写方法

sortChange(column) {
   	
      if (column.order === "descending") {
    this.table.sort((a, b) => b[column.prop] - a[column.prop]);
  } else if (column.order === "ascending") {
    this.table.sort((a, b) => a[column.prop] - b[column.prop]);
  }
 
   
    }}

之后就能解决了

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于 el-table 表格分页且可以拖拽的功能,你可以使用 Element UI 提供的 el-pagination 分页组件和 el-table-column 的 sortable 属性来实现。以下是一个示例代码: ```html <template> <el-table :data="tableData" :default-sort="{ prop: 'date', order: 'descending' }" :row-key="row => row.id" :header-cell-style="{ 'background-color': '#f5f7fa', 'color': '#333' }" style="width: 100%;" @sort-change="handleSortChange" > <el-table-column prop="name" label="Name" sortable width="180" ></el-table-column> <el-table-column prop="date" label="Date" sortable width="180" ></el-table-column> <el-table-column prop="address" label="Address" width="180" ></el-table-column> <el-table-column label="Actions" width="120" > <template slot-scope="scope"> <span class="action-button">Edit</span> <span class="action-button">Delete</span> </template> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-top: 20px; text-align: right;" ></el-pagination> </template> <script> export default { data() { return { tableData: [ { id: 1, name: 'John Doe', date: '2021-01-01', address: '123 Main St' }, { id: 2, name: 'Jane Smith', date: '2021-02-01', address: '456 Elm St' }, // more data... ], currentPage: 1, pageSize: 10, total: 20, }; }, methods: { handleSortChange(sort) { // 排序逻辑 console.log(sort); }, handleSizeChange(size) { // 每页显示条数改变逻辑 console.log(size); }, handleCurrentChange(page) { // 当前页码改变逻辑 console.log(page); }, }, }; </script> <style scoped> .action-button { color: #409eff; cursor: pointer; margin-right: 10px; } </style> ``` 在这个示例中,el-table 的数据通过 `tableData` 属性进行绑定,el-pagination 的当前页码、每页显示条数和总数分别绑定到 `currentPage`、`pageSize` 和 `total` 属性。你可以根据实际情况进行调整和修改。 需要注意的是,以上代码仅提供了分页和排序的基本实现,拖拽功能需要根据具体需求进行自定义开发,可以使用 Element UI 提供的 el-draggable 组件结合 el-table 实现拖拽功能。具体实现方式可以参考 Element UI 官方文档中的示例和说明。 希望这个示例可以帮助到你!如果有任何问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值