背景

crm系統(tǒng)中，使用elementui實(shí)現(xiàn)，table數(shù)據(jù)要根據(jù)某字段對(duì)所有數(shù)據(jù)后端排序。

展示

image.png

實(shí)現(xiàn)方案

點(diǎn)擊排序按鈕，獲取排序方式和排序字段，通過接口傳給后端，返回排序后的數(shù)據(jù)進(jìn)行展示。

具體代碼實(shí)現(xiàn)

1、table上要監(jiān)聽排序sort-change

<el-table ref="shopTable" :data="tableData" @sort-change="sortChange">

2、column上要加自定義sortable

<el-table-column :label="$t('shop.ratingStar1')" prop='ratingStar' sortable width="100"></el-table-column>

3、sortChange實(shí)現(xiàn)

sortChange(column) {
      if ( column.order ) {
        this.shopForm.sortField = column.prop
        this.shopForm.sortOrder = column.order === 'descending' ? 'desc' : 'asc'
      } else {
        this.shopForm.sortField = ''
        this.shopForm.sortOrder = ''
      }
      this.handleSearch() //獲取列表數(shù)據(jù)接口
    },