el-table排序设置某些行不参与排序

做简单的记录

sort-change 是 element表格用来监听排序变化的，只有当表格排序发生变化，才会触发这个事件，它并不只是监听某一列的排序，而是整个表格，所以它是要写在el-table上的，而不是el-table-column上。别写错地方了。

column是发生排序变化的列。
order是排序方式，有三个选项 ascending 升序、descending 降序、 null 默认排序
prop就是该列的prop。

关于sort-method
提sort-method之前先说一下sortable，只有在 el-table-column 的 sortable 为 true 的情况下。sort-method才有效。
el-table表格的每一列都可以有自己的排序方式，所以 sort-method是写在 el-table-column上的，不是在el-table上的，不要写错地方了，而且，不同于sort-change，它只是一个属性，不是事件监听，绑定的时候不要写成@sort-method="sortMethod"，而是应该用:sort-method="sortMethod"(我就是这里写错了，导致事件一直没反应=。=)

sort-method 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致。

比如下面就是我的排序方法，有a 、 b两个参数，跟 js的sort方法一样，不熟悉的可以去百度0.0

若 a 小于 b，即 a - b 小于零，则返回一个小于零的值，数组将按照升序排列。
若 a 等于 b，则返回 0。
若 a 大于 b, 即 a - b 大于零，则返回一个大于零的值，数组将按照降序排列。
以上是数字排序，像字符串排序啊属性排序啊之类的。。可以自行扩展=。=

sortable为TRUE

<el-table-column prop="sales" label="销量" sortable
    :sort-method="sortSales" width="100"/>


// 销量的排序
const sortSales = (a, b) => (a.sales - b.sales);

自定义排序的时候 sortable 需要设置为custom 下边是自定义排序忽略某些行的参考

<el-table :data="tableData" border @sort-change="soltHandle">
      <el-table-column prop="name" label="姓名" min-width="150"></el-table-column>
      <el-table-column prop="math" sortable="custom" label="数学" min-width="150"></el-table-column>
      <el-table-column prop="chinese" sortable="custom" label="语文" min-width="200"></el-table-column>
</el-table>



data: {
 tableData: [{
     name: "总计",
     math: 239,
     chinese: 241
 },{
     name: "平均",
     math: 79.6,
     chinese: 80.3
 },{
     name: "小明",
     math: 95,
     chinese: 78
 }, {
     name: "小兰",
     math: 65,
     chinese: 64
 }, {
     name: "小华",
     math: 79,
     chinese: 99
 }]
},
methods: {
 soltHandle(column) {
     let fieldName = column.prop;
     let sortingType = column.order;
     let tableData = this.tableData;
     let avgData = {}; //放置平均一行数据
     let sumData = {}; //放置总计一行数据
     tableData.map((item) => {
         if (item.name == "平均") {
             avgData = item;
         }
         if (item.name == "总计") {
             sumData = item;
         }
     });
     if (sortingType == "ascending") {
         //正序
         tableData = tableData.sort((a, b) => b[fieldName] - a[fieldName]);
         // 删除table中的平均和总计
         tableData.forEach((item, index) => {
             if (item.name == "平均") {
                 tableData.splice(index, 1);
             }
             return item;
         });
         tableData.forEach((item, index) => {
             if (item.name == "总计") {
                 tableData.splice(index, 1);
             }
             return item;
         });
         tableData.unshift(avgData);
         tableData.unshift(sumData);
     } else if (sortingType == "descending") {
         // 倒序
         tableData = tableData.sort((a, b) => a[fieldName] - b[fieldName]);
         tableData.map((item, index) => {
             if (item.name == "平均") {
                 tableData.splice(index, 1);
             }
             return item;
         });
         tableData.map((item, index) => {
             if (item.name == "总计") {
                 tableData.splice(index, 1);
             }
             return item;
         });
         tableData.unshift(avgData);
         tableData.unshift(sumData);
     }
 },
}

el-table排序设置某些行不参与排序

悦读