el-table 排序自定义后端排序

熠慕

于 2021-11-05 18:10:42 发布

阅读量643

点赞数

分类专栏：笔记文章标签： javascript vue.js elementui

本文链接：https://blog.youkuaiyun.com/qq_42693392/article/details/121168169

版权

笔记专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何在Vue中利用Element UI的El-Table组件进行数据的排序和过滤操作。通过设置`default-sort`属性可以默认按照指定列进行降序排序，并通过`@sort-change`监听排序变化。`filterHandler`函数展示了如何实现自定义的过滤逻辑。内容详细阐述了El-Table的使用技巧，对于前端开发者理解组件功能和提升开发效率有很大帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-table
              stripe
              :data="tableData"
              border style="width: 100%"
              :default-sort = "{prop: 'date', order: 'descending'}"
              @sort-change='sortthiscolumn'
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
            >

添加两条属性
:default-sort = “{prop: ‘date’, order: ‘descending’}”
@sort-change=‘sortthiscolumn’

sortthiscolumn (column){
        console.log(column)
        if(column.prop == "startTime" && column.order == "ascending"){
          // 箭头向上
        }else if(column.prop == "startTime" && column.order == "descending"){
          // 箭头向下
        }
    },
     filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },