vue el-table自定义排序

<template>
  <div>
    <el-table :data="tableData" @sort-change="handleSortChange">
      <el-table-column prop="date" label="日期" sortable="custom"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2021-01-01', name: '张三' },
        { date: '2021-01-02', name: '李四' },
        { date: '2021-01-03', name: '王五' },
      ],
    };
  },
};
</script>
changeTableSort(column) {
      // 获取字段名称和排序类型
      var fieldName = column.prop
      var sortingType = column.order

      // 按照降序排序
      if (sortingType === 'descending') {
        this.tableData.sort((a, b) => {
          return new Date(b[fieldName]) - new Date(a[fieldName])
        })
      } else {
        // 按照升序排序
        this.tableData.sort((a, b) => {
          return new Date(a[fieldName]) - new Date(b[fieldName])
        })
      }
    }
### 如何在 Element UI 的 `el-table` 中自定义排序图标 要在 Element UI 的 `el-table` 组件中实现自定义排序图标,可以通过以下方式完成: #### 使用 `header-cell-class-name` 或 `cell-style` 定义样式 可以利用 `header-cell-class-name` 属性为表头单元格设置特定的类名,从而通过 CSS 自定义排序图标的样式[^1]。 ```html <el-table :data="tableData" @sort-change="handleSortChange"> <el-table-column prop="recruitEntryNum" label="人数" width="140" sortable="custom" header-cell-class-name="custom-sort-icon"> </el-table-column> </el-table> ``` 随后,在 CSS 文件中覆盖默认的排序图标样式: ```css .custom-sort-icon .el-table__column-sorter { display: none; } .custom-sort-icon .asc-sort-icon, .custom-sort-icon .desc-sort-icon { font-size: 18px; cursor: pointer; } .custom-sort-icon .asc-sort-icon::before { content: "\25B2"; /* 向上的箭头 */ } .custom-sort-icon .desc-sort-icon::before { content: "\25BC"; /* 向下的箭头 */ } ``` 当用户触发排序事件时,动态切换对应的图标显示逻辑可以在 `@sort-change` 方法中处理[^2]。 --- #### 结合插槽 (Slot) 实现更灵活的定制化 如果需要完全控制排序图标的渲染行为,则可借助作用域插槽来替代默认的行为。例如,使用 `header` 插槽来自定义整个表头区域的内容[^3]: ```html <el-table :data="tableData" @sort-change="handleSortChange"> <el-table-column prop="recruitEntryNum" label="人数" width="140" sortable="custom"> <template slot="header" slot-scope="scope"> {{ scope.column.label }} <i class="icon-up" v-if="isAsc(scope)">↑</i> <i class="icon-down" v-if="isDesc(scope)">↓</i> </template> </el-table-column> </el-table> ``` 在此基础上,还需要编写辅助函数判断当前列的状态并返回布尔值: ```javascript methods: { isAsc({ column }) { return this.sortProp === 'recruitEntryNum' && this.orderBy === 'ascending'; }, isDesc({ column }) { return this.sortProp === 'recruitEntryNum' && this.orderBy === 'descending'; }, handleSortChange(sortInfo) { const { prop, order } = sortInfo; this.sortProp = prop; this.orderBy = order; } }, data() { return { tableData: [], sortProp: '', orderBy: '' }; } ``` 上述代码片段展示了如何基于 Vue.js 数据绑定机制更新视图中的状态变化[^4]。 --- #### 总结 以上两种方案分别适用于不同场景的需求——前者适合简单的样式调整;后者则提供了更高的灵活性以满足复杂交互设计的要求。开发者可以根据实际项目情况选择合适的解决方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值