el-table排序(部分行/指定行不参与) 排序

需求描述

待发货总数和库存 最后两行不参与排序

需要配置属性方法

• el-table 需要配置 @sort-change="soltHandle" 方法
• el-table-column 需要配置 sortable="custom"属性

详细代码如下

   <el-table @sort-change="soltHandle" :data="regionalDemands"  max-height="600" border size="small">
         <el-table-column label="#" type="index" />
         <el-table-column label="客户名称" min-width="150" prop="name">
         <el-table-column label="东北" prop="demand_NW" sortable="custom" />
         <el-table-column label="华东" prop="demand_E" sortable="custom" />
         <el-table-column label="华北" prop="demand_SW" sortable="custom" />
         <el-table-column label="华中" prop="demand_NE" sortable="custom" />
         <el-table-column label="华南" prop="demand_S" sortable="custom" />
         <el-table-column label="西南" prop="demand_M" sortable="custom" />
         <el-table-column label="西北" prop="demand_N" sortable="custom" />
         <el-table-column label="总数" prop="total_demand" sortable="custom" />
   </el-table>

 methods: {
       soltHandle(column) {
            let fieldName = column.prop;
            let sortingType = column.order;//排序类型
            let tableData = this.regionalDemands;//渲染对应data数据
            
            //待发货合计一行数据
            let awaitDeliver = tableData.find(item=>item.totalDemandText== "待发货合计");

            //库存一行数据
            let stockData = tableData.find(item=>item.totalDemandText== "库存"); 

            if (sortingType == "ascending") {
                //正序
                tableData = tableData.sort((a, b) => b[fieldName] - a[fieldName]);
            } else if (sortingType == "descending") {
                // 倒序
                tableData = tableData.sort((a, b) => a[fieldName] - b[fieldName]);
            }

            // 删除table中的待发货合计、库存
            // 两个循环要分开写，利用splice根据索引删除数据
            tableData.forEach((item, index) => {
                if (item.totalDemandText == "待发货合计") {
                    tableData.splice(index, 1);
                }
            });

            tableData.forEach((item, index) => {
                if (item.totalDemandText == "库存") {
                    tableData.splice(index, 1);
                }
            });

            tableData.push(awaitDeliver);
            tableData.push(stockData);
        },
    }