- Encountered a null return data caused confusion comes with sorting functions
Normal Sort:
Probably encounter performance issues:
After sorting, the return data to null cells, interspersed in the normal sort. Sort cause confusion
HTML part: mainly to see the Code Red
//多级表头表格
<el-table :data="tableData" :cell-style="cellStyle" @selection-change="handleSelectionChange" height="calc(100% - 40px)" :border="true" style="width: 100%" ref="multipleTable" v-loading="tableLoading" :row-key="getRowKeys" @ sort-change = "sortChange" // click the button to trigger the sort : default-sortRule the Sort = > // set the default sort, prepare for the paging function. Paging retention collation <EL-Table-column: Reserve-Selection ="to true"type ="Selection"label width ="55"align = left ="Center"> </ EL-Table-column> <EL-Table-column label ="basic information"header-align = left ="Center"> <Table EL-column-type ="index":= label " ID " align = left = " Center " width = " 60 " > </ EL-Table-column> <-! Control Header new code -> <Table EL-column-
align = left = " Center "
V- for = " TableItem in formThead "
: prop = " tableitem.key "
the sortable resizable / / the sortable sortable resizeable properties may change the column width dragging, tag table provided resizeable border attribute to true
: Key = " tableitem.key " :width="tableitem.width" :label="tableitem.label" show-overflow-tooltip min-width="100%"> <template slot-scope="scope"> <el-tag v-if="tableitem.key == 'invoiceType'" type="primary" disable-transitions>{{scope.row.invoiceType}}</el-tag> <span v-else>{{ scope.row[tableitem.key] }}</span> </template> </el-table-column> </el-table-column> <el-table-column label="采集信息" header-align="center" v-if="formTheadTwo.length > 0"> <!-- 表头控制新代码 --> <el-table-column align="center" v-for="tableitem in formTheadTwo" :prop="tableitem.key" :class="tableitem.key" sortable resizable :key="tableitem.key" :width="tableitem.width" :label="tableitem.label" show-overflow-tooltip min-width="100%"> <template slot-scope="scope"> {{ scope.row[tableitem.key] }} </template> </el-table-column> </el-table-column> <el-table-column label="发票状态" header-align="center" :data="formTheadThree"> <!-- 表头控制新代码 --> <el-table-column align="center" v-for="tableitem in formTheadThree" :prop="tableitem.key" sortable resizable :key="tableitem.key" :width="tableitem.width" :label="tableitem.label" show-overflow-tooltip min-width="100%"> <template slot-scope="scope"> {{ scope.row[tableitem.key]}} </template> </el-table-column> <el-table-column label="扫描流水号" align="center" prop="scanNo" min-width="150%" sort-by="scanNo" sortable resizable show-overflow-tooltip> <template slot-scope="scope">{{scope.row.scanNo}}</template> </el-table-column> </el-table-column> <el-table-column fixed="right" label="操作" align="center" min-width="150%"> <template slot-scope="scope"> <el-button type="text" @click="openItemDetail(scope)" size="mini">查看</el-button> <el-button type="text" size="mini" @click="handleEdit('编辑',scope)" v-if="scope.row.checkStatus === '未查验'" style="color:green;">编辑</el-button> <el-button type="text" @click="deleteItem(scope)" size="mini" v-if="scope.row.canDel == '1' && scope.row.checkStatus === '未查验'" style="color:red;">删除</el-button> </template> </el-table-column> </el-table>
data objects:
data() { return { sortRule:{prop:null,order:null} } }
JS: the idea is over the data request back to restructure the returned value is null, then combined into an array, and there are different arrays, that returns a value, so that the null value of the total data and the data has a value of polarization , respectively, before and after the row array. Elementui the table with sorting table itself can have an effect.
// Sort trigger functions sortChange (column) { // console.log (column, "sortchange")
// up [down] Click to inspire the sort IF (column.order! == null && column.prop! == null ) { // project requires that all columns be sorted, so the determination conditions! that is, all columns [== null if the project is only a single column [column] specific ordering requirements exist, confusion, colum.prop == "column of the key" can be. } Var index = column.prop; var Data = []; var samllData = []; for (the let I = 0 ; I < the this .tableData.length; I ++ ) { //this.tableDate total data as a table, a background request the data IF (the this .tableData [I] [index] === null ) { data.push ( the this .tableData [I]); } the else IF ( the this .tableData [I] [index] <= 0 ) { // Item present financial data, the number of returns of more than 0.00 for such data 2, it can not be equal to the judge, we were here to compare the size of 0.00 to capture this data. samllData.push ( the this .tableData [I]) } the else { data.unshift ( the this .tableData [I]); } } the this .tableData = data.concat (samllData); [so splicing sequence, the previous null ensure tight 0 then, gradually increase. } }
// then click up [down] to restore the original sort if(column.order === null){ this.tableData = this.tableData; } this.sortRule.order = column.order; this.sortRule.prop = column.prop; },
Judgment check request data, the page containing the pagination, the page collation continue saving:
/ / If statement placed in the secondary el-table tag assignment request interface, pick background data, to complete the paging function after assignment to this.table array, there is still turning after [collation with the default-sort Attributes
].
// whether collation is present, the presence of the retention IF ( the this .sortRule.order ==! Null && the this .sortRule.prop ==! Null ) { the this .sortChange ( the this .sortRule); }
final effect:
After turning still retained collation:
抓取0.00格式数据正确进行排列：
