1. Business scenarios

When using a table, there is often a need to sort. Sometimes, the customer asks for a sort (whether ascending or descending), with the first row unaffected. Antdv table, there is no directly available API, this paper is to solve such a problem.

Second, effect display

Third, train of thought

Add a judgment to sort

The sort function in the table component is actually a bubble sort. We just need to add a judgment when sorting (whether the current order is ascending or descending, whether it is the first row). Related apis in the table component include the change event and sorter function.

The specific implementation

(1) Add a provinceCode for the data to be displayed in the first line.

(2) In the change event, its parameter sorter. Order is the current ordering order, ascend, descend. Bubble sort, always on the first line. In ascending order, the maximum positive value is returned. In descending order, the return value is the maximum negative number. Related codes:

Dom <a-table class="partTable" :columns="columns__province" :data-source="fold_province ? TableShow_province : TableData_province" :pagination="false" rowKey="provinceCode" @change="change__province" :locale="{ emptyText: Countless according to 'temporary'} "> < span slot =" num "slot - scope =" num "> {{num | NumberFormatSp}} < / span > < span slot =" rate "slot - scope =" rate "> {{rate}}% </span> </a-table> JS data{return{columns__type: [{title: 'complete number ', sorter: (a, b) => { let result = a.num - b.num if (this.sort_province === 'ascend') { if (a.provinceCode === '0' || b.provinceCode === '0') {result = 99999999}} return result}}, {title: 'completion rate (%)',\ sorter: (a, b) => { let result = a.rate - b.rate if (this.sort_province === 'ascend') { if (a.provinceCode === '0' || b.provinceCode  === '0') { result = 99999999 } } else if (this.sort_province === 'descend') { if (a.provinceCode === '0' || B.provincecode === '0') {result = -99999999}} return result}}], sort_type :null}}, Methods :{getProvinceData() {DigitalAccountCourseProv(). Then (res => {res = [{provinceName: 'Beijing ', coursework: '0.6', courseFinishUser: '999999', provinceCode: '0'}, {provinceName: 'Shanxi ', courseFinishUser: '0.9', courseFinishUser: ProvinceCode: '10'}, {provinceName: 'shaanxi ', courseFinishUser: '0.8', courseFinishUser: '8888', provinceCode: '20' } ] this.TableData_province = res.map((item, index) => { let { provinceName, courseAccounted, courseFinishUser, provinceCode } = item return { id: ('0' + (index + 1)).slice(-2), name: provinceName, num: courseFinishUser, rate: (courseAccounted * 100).toFixed(2), This.tableshow_province = this.tableData_province. Filter ((item, index) => { return index < 5 }) }) }, change__province(pagination, filters, sorter, { currentDataSource }) { this.sort_province = sorter.order } }Copy the code

Four, stern said

If it helps, give it a thumbs up!