Vue+element UI实现列表全部数据排序

最新推荐文章于 2024-05-27 19:56:20 发布

Song_Estelle

最新推荐文章于 2024-05-27 19:56:20 发布

阅读量1k

点赞数 1

文章标签： vue.js ui 前端

本文链接：https://blog.csdn.net/weixin_43484014/article/details/131084613

版权

element ui 表格中的sortable属性只能实现当前页数据的排序，无法实现整张表全部数据的排序，所以需要采取自定义的排序方式重新触发接口，获取排序好的全部列表

Java后端的分页列表有这两个字段需要前端去传递：
在这里插入图片描述
el-table 上加上sort-change事件，当表格的排序条件发生变化的时候会触发该事件

@sort-change="onSortChange"

需要排序的列加上自定义的排序

sortable="custom"
:sort-orders="['ascending', 'descending']"

全部代码如下：

视图部分：

<el-table
  border
  v-loading="loading"
  :data="fingerList"
  @sort-change="onSortChange"
  ref="fingerTable"
>
  <el-table-column type="selection" width="55" align="center"/>
  <el-table-column label="序号" type="index" width="55" align="center"/>
  <el-table-column
    label="备注"
    align="center"
    prop="notes"
    sortable="custom"
    :sort-orders="['ascending', 'descending']"/>
</el-table>

scripts部分：

export default {
  data() {
  	// 记录表格数据
    fingerList: [],
    // 查询参数
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      // 排序的列表字段
      orderByColumn: null,
      // asc正序 desc倒序
      isAsc: null
    },
  },
  methods: {
  	// 点击排序
    onSortChange(column) {
      this.queryParams.orderByColumn = column.prop
      this.queryParams.isAsc = column.order === "ascending" ? 'asc' : 'desc'
      // 获取后台列表数据
      this.getList()
    },
    // 重置按钮
    resetQuery() {
      this.queryParams.orderByColumn = null
      this.queryParams.isAsc = null
      // 清除列表排序
      this.$refs.fingerTable.clearSort()
	  this.queryParams.pageNum = 1
      this.getList()
    },
  }
}