VUE Element UI 排序功能结合后端接口实现

1. 需求

要求在页面列表上点击某个列的排序按钮，能够联动后端接口一起排序分页。

2. 前端实现

废话不多说，直接上代码

<el-table
        ref="dsTable"
        :data="displayData"
        height="100%"
        :data-selectable="optionData.selectable"
        :auto-hide-selection="optionData.autoHideSelectable"
        :show-column-selection="optionData.showColumnSelection"
        :border="optionData.columnResizable"
        highlight-current-row
        @row-click="handleRowClick"
        @selection-change="handleSelectionChange"
        :default-sort="{ prop: 'entityName', order: 'descending' }"
        @sort-change="handleSortChange"
        :header-cell-class-name="handleHeaderCellClass"
      >
        <el-table-column
          label="实体名称"
          show-overflow-tooltip
          prop="entityName"
          sortable="custom"
          :sort-orders="['descending', 'ascending', null]"
        ></el-table-column>
        <el-table-column
          label="实体中文名"
          show-overflow-tooltip
          prop="entityChName"
        ></el-table-column>
        <el-table-column
          label="模型名称"
          show-overflow-tooltip
          prop="modelName"
        ></el-table-column>
        <el-table-column
          label="最新提交时间"
          show-overflow-tooltip
          prop="commitTime"
          width="135"
          :formatter="$timeFormatter"
          sortable="custom"
          :sort-orders="['descending', 'ascending', null]"
        ></el-table-column>
      </el-table>

其中重要点是：
el-table 标签上的：

:default-sort="{ prop: 'entityName', order: 'descending' }"

@sort-change="handleSortChange"

:header-cell-class-name="handleHeaderCellClass"
el-table-column 标签上的

:sort-orders="['descending', 'ascending', null]"

下面是具体的JS方法：

export default {
  data() {
    return {
	  // 排序
      orderArray: [],
      sortField: {},
      curSort: '',
      orderBySql: '',
    }
  },
  methods: {
    getData() {
      const params = {
        orderBySql: this.orderBySql,
      }
      this.$http
        .post(`/aaaa/bbbb/cccc/page`, params)
        .then(res => {
          this.tableLoading = false
          let resData = res.data
          if (resData.code == 1) {
            this.displayData = resData.data.list
            this.total = resData.data.total
          } else {
            this.$message.error(resData.message)
          }
        })
        .catch(e => {
          console.log(e,'服务器内部错误')
        })
    },
    handleSortChange({ column, prop, order }) {
      if (!order || this.sortField[prop] === order) {
        // 排序字段按触发顺序确定排列优先级，需要删除字段确保下次触发时位于最后优先级
        delete this.sortField[prop]
      } else {
        this.sortField[prop] = order
      }
      if (order) {
        // 参与排序
        let flagIsHave = false
        this.orderArray.forEach(element => {
          if (element.prop === prop) {
            element.order = order
            flagIsHave = true
          }
        })
        if (!flagIsHave) {
          this.orderArray.push({
            prop: prop,
            order: order,
          })
        }
        this.curSort = order == 'descending' ? 'desc' : 'asc'
      } else {
        // 不参与排序
        this.orderArray = this.orderArray.filter(element => {
          return element.prop !== prop
        })
        // 取消当前的排序,curSort是当前点击项的前一项的order
        if (this.orderArray.length <= 0) {
          this.curSort = 'asc'
        } else {
          this.curSort =
            this.orderArray[this.orderArray.length - 1].order == 'descending'
              ? 'desc'
              : 'asc'
          console.log(this.curSort, 'ppp')
        }
      }
      // 转换字段属性
      this.getSortList(this.orderArray)
    },
    getSortList(arr) {
      // 组装排序 语句
      if (arr.length > 0) {
        let orderBySql = ''
        arr.forEach(item => {
          let prop = this.strChange(item.prop)
          let order = item.order == 'descending' ? 'desc' : 'asc'
          orderBySql += prop + ' ' + order + ' ,'
        })
        orderBySql = 'order by ' + orderBySql.substr(0, orderBySql.length - 1)
        // 调后端列表接口
        this.orderBySql = orderBySql
        this.getData()
      } else {
        // 调后端列表接口
        if (
          typeof this.orderBySql != 'undefined' &&
          this.orderBySql != null &&
          this.orderBySql != ''
        ) {
          this.orderBySql = ''
          this.getData()
        }
      }
    },
    // 驼峰改下划线
    strChange(arg) {
      var str = arg.split('')
      for (var i = 0; i < str.length; i++) {
        if (str[i].charCodeAt() >= 65 && str[i].charCodeAt() <= 90) {
          str[i] = '_' + str[i].toLowerCase()
        }
      }
      return str.join('')
    },
    // 添加排序方法（可把多个字段共同加入排序）
    handleHeaderCellClass({ row, column, rowIndex, columnIndex }) {
      this.orderArray.forEach(element => {
        if (column.property === element.prop) {
          column.order = element.order
        }
      })
    },
  },
}

上述JS仅仅提供的是排序相关代码，其他代码自行补充。

3. 后端实现

后端接受到的参数是这样的：

"orderBySql": "order by commit_time desc"

所以 后端代码就知道该怎么写了吧。

若有错误，希望大佬指出。

对你有帮助给点个👍再走呗。