vue2 el-table指定某些数据不参与排序
- 1、需求描述
- 2、配置属性方法
- 3、详细代码如下
1、需求描述
最后一行总计不参与排序
2、配置属性方法
el-table 需要配置 @sort-change="soltHandle" 方法
el-table-column 需要配置 sortable="custom"属性
3、详细代码如下
<el-table
v-loading="loading"
border
:data="stationTableData"
:header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }"
style="width: 100%"
height="470"
stripe
:row-class-name="rowClass"
class="table-style"
@sort-change="soltHandle"
>
<el-table-column
prop="name"
label="电站名称"
width="150"
></el-table-column>
<el-table-column prop="province" label="所属省份" width="100">
<template slot-scope="{ row }">
{{ getChineseName(row.province).value }}
</template>
</el-table-column>
<el-table-column
prop="operationDate"
label="投运时间"
width="100"
></el-table-column>
<el-table-column
prop="capacity"
label="容量(kWh)"
width="120"
sortable="custom"
></el-table-column>
<el-table-column
prop="charge"
label="充电量(kWh)"
width="120"
></el-table-column>
<el-table-column
prop="discharge"
label="放电量(kWh)"
width="120"
></el-table-column>
<el-table-column
prop="saveElectricity"
label="节约电费(元)"
width="130"
sortable="custom"
></el-table-column>
<el-table-column
prop="customerElectricityRevenue"
label="客户电费收益(元)"
width="160"
sortable="custom"
></el-table-column>
<el-table-column
prop="ownElectricityRevenue"
label="结算电费(元)"
width="130"
sortable="custom"
></el-table-column>
<el-table-column label="操作">
<template slot-scope="{ row }">
<el-button
v-if="row.name !== '总计'"
type="text"
@click="goElectricityBill(row.id)"
>
结算单
</el-button>
</template>
</el-table-column>
</el-table>
methods: {
soltHandle(column) {
console.log(column)
//不参与排序的数组
let freeGood = []
//参与排序的数组
let elseFree = []
//fieldName 为对应列的prop
let fieldName = column.prop
let sortingType = column.order
//降序
if (sortingType == 'descending') {
this.stationTableData.forEach((item) => {
//在整个tableData中找到不参与排序的所有数据
if (!item.id) {
//不参与排序的所有数据加到数组中
freeGood.push(item)
} else {
//参与排序的数据
elseFree.push(item)
}
})
this.stationTableData = elseFree.sort((a, b) => {
if (typeof a[fieldName] == 'string') {
return b[fieldName].localeCompare(a[fieldName])
} else if (typeof a[fieldName] == 'number') {
return b[fieldName] - a[fieldName]
}
})
this.stationTableData = [...this.stationTableData, ...freeGood]
} else {
this.stationTableData.forEach((item) => {
//在整个tableData中找到不参与排序的所有数据
if (!item.id) {
//不参与排序的所有数据加到数组中
freeGood.push(item)
} else {
//参与排序的数据
elseFree.push(item)
}
})
this.stationTableData = elseFree.sort((a, b) => {
if (typeof a[fieldName] == 'string') {
return a[fieldName].localeCompare(b[fieldName])
} else if (typeof a[fieldName] == 'number') {
return a[fieldName] - b[fieldName]
}
})
this.stationTableData = [...this.stationTableData, ...freeGood]
}
},
}