vue+element-ui table表格前端自定义排序

 //表格自定义排序 @sort-change='sortChange'
<el-table
   :data="tableData1"
   style="width: 100%"
   v-loading="loading"
   id="table"
   :header-cell-style="{background:'#fafafa'}"
   @sort-change='sortChange'
        >

//sortable="'custom'"表示自定义排序
<el-table-column prop="mobileCrashId" label="ID" width="80px" sortable="'custom'"></el-table-column>

</table>

获取后端返回的数据：

const getTableData = async() =>{
let res = await requestApi.crashApi.post({...params})
    tableData.value = res
    tableData2.value = res
    total.value = res.length
    //分页展示数据
    if(res.length>10){
        tableData1.value = res.slice(0,pageSize4.value)
    } else{
        tableData1.value = res
    }
    loading.value = false
}

自定义排序操作： 

const tableData = ref([]);      //表格操作数据
const tableData1 = ref([]);        //表格展示数据
const tableData2 = ref([]);    //后端返回的数据

// 排序
const sortChange = (column) =>{
    //column.prop表示table每一列绑定的prop
    //column.order升序或者降序  descending/ascending
    tableData.value = search(column.prop, column.order)
    //结合前端分页实现
    tableData1.value = tableData.value.slice(0,pageSize4.value)
    currentPage4.value = 1; // 排序后返回第一页
}

const search=(sortName,sortValue)=>{
    const data = JSON.parse(JSON.stringify(tableData.value)).slice();
    /** sort data **/
    if (sortName && sortValue) {
      return data.sort((a, b) =>
        sortValue === 'ascending'
          ? Number(a[sortName]) > Number(b[sortName])
            ? 1
            : -1
          : Number(b[sortName]) > Number(a[sortName])
            ? 1
            : -1
      );
    } else {
    //不排序时返回的是从后端获取回来的数据
      return tableData2.value;
    }
  }

前端分页操作：

// 前端分页
const currentPage4 = ref(1);
const pageSize4 = ref(10);
// 总数据
const total = ref(0);
const handleSizeChange = (p) => {
	pageSize4.value = p;
    currentPage4.value = 1;
    const end = currentPage4.value * p;
    const data = JSON.parse(JSON.stringify(tableData.value)).slice(
        tableData.value.length > p ? end - p : 0,
        end
      );
      tableData1.value = data;
};
const handleCurrentChange = (p) => {
    console.log(JSON.parse(JSON.stringify(tableData.value)),'pppp');
	currentPage4.value = Math.ceil(p);
    const end = Math.ceil(p) * pageSize4.value;
    const data = JSON.parse(JSON.stringify(tableData.value)).slice(end - pageSize4.value, end);
    tableData1.value = data;
};