ElementUI table 表格动态更改每行样式和排序触发后端排序

ElementUI table 表格动态更改每行样式和排序触发后端排序

 <el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}" :row-class-name="tableRowClassName" @sort-change="tableSort">

1、:row-class-name="tableRowClassName" 可为表格每行根据后面的函数绑定class名

    tableRowClassName({ row, rowIndex }) {
      if (row) {
        if (row.isRed === 1) {
          return 'red-row'
        } else {
          return ''
        }
      }
    }

<style>
.el-table .red-row {
  color:#51A6FF;
  background:#EAF5FF;
}
</style>

2、 @sort-change="tableSort"

根据点击排序箭头触发排序事件，得到

1. column: {…}
2. order: "ascending"
3. prop: "收件量"

这三个参数，传给后端做为排序依据。

注意：sortable要设置为custom

<el-table-column prop="receiveOfficeNum" label="收件量" sortable="custom" />