需求:数据表格<el-table> <el-table-column>增加排序功能可升序降序。

步骤:

1、在列中设置sortable属性即可实现以该列为基准的排序。(需要后端排序,需将sortable设置为custom

2、设置prop排序字段名称。

      <el-table-column
        label="创建日期"
        align="center"
        min-width="120"
        sortable="custom"
        prop="xxx"
      >
        <template slot-scope="{row}">
          <span>{{ row.xxx | formatDate("YYYY-MM-DD", '-') }}</span>
        </template>
      </el-table-column>

3、在 Table 上监听sort-change事件。

    <el-table
      ref="tableData"
      v-loading="listLoading"
      :data="Data.list"
      border
      style="width: 100%"
      @sort-change="sortChange"
    >

4、data 添加

data() {
    return {
queryContent: {        
        sortPropertyName: '',//排序的字段名
        sortType: '',//升降序类型
        }
    }
}

5、sort-change事件方法排序 {column,prop,order} 列数据|排序字段|排序方式

 methods: {   
 // 排序 {column,prop,order} 列数据|排序字段|排序方式
    sortChange(column) {
      this.queryContent.sortPropertyName = column.prop
      this.queryContent.sortType = column.order
      this.getList()
    }
  }

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐