el-table sortable只要降序

在使用 Element UI 的 `el-table` 组件时，如果希望只启用降序排序功能，可以通过配置 `default-sort` 和 `sortable` 属性来实现。Element UI 提供了灵活的排序控制方式，允许开发者根据需求定制排序行为。 ### 配置默认排序方式 `default-sort` 属性可以设置表格的默认排序字段和排序方式。如果希望某一列默认以降序排列，可以将 `default-sort` 设置为该列的 `prop` 并指定 `order` 为 `'descending'`。 ### 禁用升序排序 Element UI 默认允许用户通过点击表头切换升序和降序。如果希望只允许降序排序，可以通过监听 `sort-change` 事件并手动控制排序方式。在事件处理函数中，强制将排序方式设置为 `'descending'`。 以下是一个实现示例： ```vue <template> <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }" @sort-change="handleSortChange" > <el-table-column prop="date" label="日期" sortable="custom"> <template slot="header" slot-scope="scope"> <span>日期</span> </template> </el-table-column> <el-table-column prop="name" label="姓名"> <template slot="header" slot-scope="scope"> <span>姓名</span> </template> </el-table-column> <el-table-column prop="address" label="地址"> <template slot="header" slot-scope="scope"> <span>地址</span> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { date: '2023-07-01', name: '张三', address: '北京市' }, { date: '2023-07-03', name: '李四', address: '上海市' }, { date: '2023-07-02', name: '王五', address: '广州市' } ] }; }, methods: { handleSortChange({ column, prop, order }) { // 强制排序方式为降序 if (order !== 'descending') { this.$refs.table.sort(prop, 'descending'); } } } }; </script> ``` ### 关键点说明 1. **`sortable="custom"`**：在需要排序的列上设置 `sortable="custom"`，表示该列使用自定义排序方式。 2. **`@sort-change` 事件**：通过监听 `sort-change` 事件，可以在用户尝试排序时拦截请求，并强制将排序方式设置为降序。 3. **`this.$refs.table.sort(prop, 'descending')`**：手动调用 `sort` 方法，将排序方式设置为降序。 通过这种方式，可以确保用户只能对指定列进行降序排序，而无法进行升序排序或取消排序。此外，该方法还可以灵活地扩展到其他列，根据业务需求进行调整。 ### 样式优化 如果希望隐藏排序图标或调整排序相关的样式，可以通过自定义 CSS 进行覆盖。例如，可以隐藏升序图标或调整排序按钮的外观。 ```css .el-table__column-sort .ascending { display: none; } ``` ### 注意事项 - 如果表格数据是通过接口动态获取的，建议在排序逻辑中结合后端排序功能，以确保数据的正确性。 - 在某些情况下，可能需要根据业务需求调整 `handleSortChange` 方法中的逻辑，例如允许部分列启用排序功能。