排序前端也经常做,以前都做的是很简单排序,所有的数据参与排序,直接用插件封装的就行,但是这次是一些数据不参与排序所以这时候就需要进行自定义的设置
思路:首先分成两个数组,一个数组的数据参与排序另一组数据不参与排序,将不参与排序的数据追加到排序的数组后面
代码解析:

<el-table
  height="480"
  ref="table"
  @row-dblclick="dataBackFillGoods"
  @current-change='currentchange'
  highlight-current-row
  :data="tableData"
  stripe
  style="width: 100%"
  @sort-change="sortChangefirst" //要自己设置某些条件排序
>
	<el-table-column
              label="可售库存"
              width="110"
              :sortable='true'
              :sort-method="sortCounts"
              prop="counts" //进行排序必须的prop
              column-key="counts"
              sortable='custom' //与@sort-change搭配
            >
         <template slot-scope="scope">
              {{scope.row.counts}}
         </template>
     </el-table-column>
</el-table>

js代码:

sortChangefirst(column){
	//不参与排序的数组
	var freeGood = []
	//参与排序的数组
    var elseFree = []
    //fieldName 为对应列的prop
    var fieldName = column.prop
    var sortingType = column.order
    //降序
    if (sortingType == "descending"){
		this.tableData.forEach(item => {
			//在整个tableData中找到不参与排序的所有数据
			if (item.style) {
				//不参与排序的所有数据加到数组中
            	freeGood.push(item)
         	 }
         	 else { 
          		//参与排序的数据
            	elseFree.push(item)
          	}
		})
		//进行排序
		this.tableData = elseFree.sort((a, b) => b[fieldName] - a[fieldName])
		//如果要排序字符串
		//可以对fieldName进行判断进行如下操作
		//this.tableData = elseFree.sort((a, b) => b[fieldName].localeCompare(a[fieldName]))
	}else{
		this.tableData.forEach(item => {
			if (item.style) {
            	freeGood.push(item)
          	}else { 
            	elseFree.push(item)
          	}
		})
		this.tableData = elseFree.sort((a, b) => a[fieldName] - b[fieldName])
	}
}
Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐