vue2 el-table指定某些数据不参与排序
- 1、需求描述
- 2、配置属性方法
- 3、详细代码如下
1、需求描述
最后一行总计不参与排序
2、配置属性方法
el-table 需要配置 @sort-change="soltHandle" 方法
el-table-column 需要配置 sortable="custom"属性
3、详细代码如下
<el-tablev-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-columnprop="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-columnprop="operationDate"label="投运时间"width="100"></el-table-column><el-table-columnprop="capacity"label="容量(kWh)"width="120"sortable="custom"></el-table-column><el-table-columnprop="charge"label="充电量(kWh)"width="120"></el-table-column><el-table-columnprop="discharge"label="放电量(kWh)"width="120"></el-table-column><el-table-columnprop="saveElectricity"label="节约电费(元)"width="130"sortable="custom"></el-table-column><el-table-columnprop="customerElectricityRevenue"label="客户电费收益(元)"width="160"sortable="custom"></el-table-column><el-table-columnprop="ownElectricityRevenue"label="结算电费(元)"width="130"sortable="custom"></el-table-column><el-table-column label="操作"><template slot-scope="{ row }"><el-buttonv-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 为对应列的proplet fieldName = column.proplet 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]}},
}