Vue+element-UI实现列表排序（sortable、custom）

1.sortable、custom区别：

在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。

可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。

可以使用sort-method或者sort-by使用自定义的排序规则。

如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。

2.sortable、custom分别应该在什么情况下使用：

1）sortable属性：当你的表格数据是简单的字符串或数字类型，并且你只需要对列进行普通的升序或降序排序时，可以使用sortable属性。

<el-table :data="tableData">
  <el-table-column prop="name" label="Name" sortable></el-table-column>
  <el-table-column prop="age" label="Age" sortable></el-table-column>
</el-table>

在上述示例中，sortable属性添加到了表格列上，表示该列可以进行排序。当用户点击表头的排序按钮时，表格会自动按照该列的值进行升序或降序排序。

2）custom属性：当你需要自定义排序逻辑，例如根据特定字段进行复杂的排序，或者需要对非字符串和数字类型的数据进行排序时，可以使用custom属性。

<el-table :data="tableData">
  <el-table-column prop="name" label="Name" sortable></el-table-column>
  <el-table-column prop="age" label="Age" sortable :sort-method="customSort"></el-table-column>
</el-table>

在上述示例中，custom属性添加到了需要自定义排序的表格列上，并通过:sort-method属性指定了一个自定义的排序方法customSort。

methods: {
  customSort(a, b) {
    // 自定义排序逻辑
    // 返回负数表示a应该在b之前，返回正数表示a应该在b之后，返回0表示a和b相等
    // 可根据需要对a和b进行比较，并返回适当的值
  }
}

在customSort方法中，你可以根据具体需求对a和b进行比较，并返回相应的值，以实现自定义的排序逻辑。

总结：

使用sortable属性进行简单的升序或降序排序。
使用custom属性配合自定义的排序方法进行复杂的排序逻辑或非字符串和数字类型的排序。
当数据较多时使用custom。因为sortable属性在处理大量数据或复杂的排序要求时可能会出现性能问题。

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

Java后端的分页列表需要前端去传递这两个字段：

el-table 上加上sort-change事件，当表格的排序条件发生变化的时候会触发该事件

@sort-change="onSortChange"

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

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

   <el-table
      v-loading="loading"
      :data="tableData"
      size="mini"
      :row-class-name="tableRowClassName"
      header-cell-class-name="table_header"
      @sort-change="onSortChange"
      fix
    >
  <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>

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

参考：Vue+element UI实现列表全部数据排序_elementui 排名列表_Song_Estelle的博客-CSDN博客

Vue+element-UI实现列表排序（sortable、custom）

猜你喜欢