点开就懂，Vue+element-UI实现列表排序！

2023-12-26 05:02:05

在 Vue 中使用 Element-UI 实现灵活的列表排序

摘要

Element-UI 是一个基于 Vue 的 UI 框架，它为创建复杂而交互的界面提供了丰富的组件集。Element-UI 的 Sortable 和 Custom 属性使我们能够轻松地在列表中实现排序功能，以满足各种排序需求。

Sortable 属性：简单而高效的排序

当你的表格数据包含字符串或数字类型时，Sortable 属性提供了一个简单而高效的排序方法。只需将其添加到列上即可启用升序或降序排序。

<el-table :data="tableData" sortable>
  <el-table-column property="name" label="姓名" sortable></el-table-column>
  <el-table-column property="age" label="年龄" sortable></el-table-column>
</el-table>

Custom 属性：自定义复杂排序

如果需要对非字符串或数字类型数据进行排序，或者需要自定义排序逻辑，Custom 属性派上了用场。它允许你指定自定义比较函数，从而获得完全控制权。

<el-table :data="tableData" :row-class-name="tableRowClassName">
  <el-table-column label="姓名" custom-sort=(row1, row2) => {
    return row1.name.localeCompare(row2.name)
  }></el-table-column>
</el-table>

事件处理：获取排序信息

通过 sort-change 事件，我们可以监听排序状态的变化。它将返回当前排序的字段名和排序顺序，以便进一步处理。

<el-table :data="tableData" sortable @sort-change="handleSortChange">
  <el-table-column property="name" label="姓名" sortable></el-table-column>
  <el-table-column property="age" label="年龄" sortable></el-table-column>
</el-table>

methods: {
  handleSortChange(column) {
    console.log(column.prop, column.order)
  }
}

重新触发接口获取完整排序列表

Sortable 和 Custom 属性只能对当前页面数据进行排序。要对整个列表进行排序，我们需要重新触发接口并请求排序后的数据。

async handleSortChange(column) {
  const { prop, order } = column

  const res = await this.$axios.get('/api/list', {
    params: {
      sortField: prop,
      sortOrder: order
    }
  })

  this.tableData = res.data.data
}

结论

使用 Element-UI 的 Sortable 和 Custom 属性，我们可以轻松地在 Vue 列表中实现排序功能。通过 sort-change 事件，我们可以监听排序状态的变化并根据需要重新触发接口。无论是简单的字符串排序还是复杂的自定义逻辑，Element-UI 都能提供强大且灵活的解决方案。

常见问题解答

如何自定义排序箭头？
你可以通过 sort-orders 属性指定自定义箭头，例如：
```
<el-table :sort-orders="['ascending', 'descending', 'none']"></el-table>
```
如何禁用列表排序？
设置 sortable 或 custom-sort 属性为 false 即可禁用列表排序。
如何设置默认排序？
使用 default-sort 属性设置默认排序字段和顺序，例如：
```
<el-table :default-sort="{ prop: 'name', order: 'ascending' }"></el-table>
```

如何实现多字段排序？
Element-UI 不支持直接的多字段排序，但你可以使用自定义函数来模拟多字段排序，例如：

custom-sort=(row1, row2) => {
  const name1 = row1.name
  const age1 = row1.age
  const name2 = row2.name
  const age2 = row2.age

  if (name1 !== name2) {
    return name1.localeCompare(name2)
  } else {
    return age1 - age2
  }
}