AI智能
改变未来

element-ui Table组件多列同时排序

需求:将产品名称相同的排在一起的同时,再按产品规格*分隔的第一个数值排序

实现效果

排序前:

排序后:

实现的核心操作:

1.为table绑定sort-change事件,并为产品规格列指定sort-method的排序方法

[code]<el-tableref=\"productTable\":data=\"productTableData\":border=\"true\":highlight-current-row=\"true\"v-loading=\"productTableLoading\"@sort-change=\"sortChange\"@selection-change=\"(selection)=>{selectList=selection}\"@row-click=\"row=>{$refs.productTable.toggleRowSelection(row)}\":row-key=\"row=>row.id\"><el-table-column :reserve-selection=\"true\" type=\"selection\" align=\"center\"></el-table-column><el-table-column prop=\"customer_name\" label=\"客户名称\" align=\"center\"></el-table-column><el-table-column prop=\"product_name\" label=\"产品名称\" align=\"center\"></el-table-column><el-table-column prop=\"product_size\" label=\"产品规格\" align=\"center\" :sortable=\"true\" :sort-method=\"sortMethod\"></el-table-column><el-table-column prop=\"product_price\" label=\"产品单价\" align=\"center\"></el-table-column><el-table-column prop=\"stock_number\" label=\"库存数量\" align=\"center\" :sortable=\"true\"></el-table-column>

2.当点击排序时,会先执行sortChange中的代码,判断是否点击的是产品规格列,是的话记录当前的排序方式,this.saveTableData是从后端获取的原始数据的备份,如果排序方式是null的话table的数据就用原始数据否则就对产品名称进行排序将产品名称相同的排在一起

3.然后会执行sortMethod再对产品名称相同的按规格的第一个参数再进行排序,产品名称不同的或当前的排序方式为null时就维持现状(return 0)

[code]methods: {sortChange ({ column, prop, order }) {if (prop === \'product_size\') {this.orderType = orderif (order === null) {this.productTableData = JSON.parse(JSON.stringify(this.saveTableData))} else {this.productTableData.sort((a, b) => {if (a.product_name > b.product_name) {return 1}if (a.product_name < b.product_name) {return -1}return 0})}}},sortMethod (a, b) {if (this.orderType === null) {return 0}if (a.product_name !== b.product_name) {return 0}let diamA = a.product_size.split(\'*\')[0]let diamB = b.product_size.split(\'*\')[0]return diamA - diamB},

4.为了使新数据还能保持当前的排序状态,我们要在从后端获取到表格数据的第一时间对表格使用sort()手动排序

[code]getList () {this.productTableLoading = truegetProductList(this.searchForm).then(res => {// console.log(res)if (res.data.status === 200) {this.productTableData = res.data.datathis.saveTableData = JSON.parse(JSON.stringify(res.data.data))this.$refs.productTable.sort(\'product_size\', this.orderType)this.productTableTotal = res.data.totalthis.productTableLoading = false} else {this.$message.error(res.data.msg)}})}

 

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » element-ui Table组件多列同时排序