Element-ui2.0实现表格多列进行排序
Element-ui2.0实现表格多列进行排序
样例:
1.html代码:
<el-table
:data="ptPartDetail"
style="width: 100%"
border
@sort-change="handleSortChange"
:header-cell-class-name="handleHeaderCellClass"
>
<el-table-column
type="index"
label="序号"
width="50"
align="center"
>
</el-table-column>
<el-table-column prop="id" label="物料编码" width="150">
</el-table-column>
<el-table-column prop="name" label="物料名称" width="120">
</el-table-column>
<el-table-column
prop="btno"
label="物料批号"
width="120"
sortable="custom"
>
</el-table-column>
<el-table-column prop="btnoAllQty" label="批次数量" width="120">
</el-table-column>
<el-table-column
prop="btnoLocQty"
label="库存数量"
width="120"
sortable="custom"
>
</el-table-column>
<el-table-column prop="unitPrice" label="物料单价" width="120">
</el-table-column>
<el-table-column
prop="productDate"
label="生产日期"
width="120"
sortable="custom"
>
</el-table-column>
<el-table-column prop="version" label="物料版本" width="120">
</el-table-column>
<el-table-column prop="unit" label="单位" width="120">
</el-table-column>
2.定义Data数组存放筛选数据
// data中定义Arr数组,用来存放筛选列
data(){
return {
orderArray: [],
}
}
3.排序方法
//排序方法
handleHeaderCellClass({row, column, rowIndex, columnIndex}){
this.orderArray.forEach(element => {
if (column.property===element.prop) {
column.order=element.order
}
});
},
handleSortChange( {column, prop, order} ){ //order值(ascending、descending、null)对应不同的排序方式
if (order) { //参与排序
let flagIsHave=false
this.orderArray.forEach(element => {
if (element.prop === prop) {
element.order=order
flagIsHave=true
}
});
if (!flagIsHave) {
this.orderArray.push({
prop:prop,
order:order
})
}
}else{ //不参与排序
let orderIndex=0
this.orderArray.forEach((element,index) => {
if (element.prop === prop) {
orderIndex=index
}
});
this.orderArray.splice(orderIndex,1)
}
console.log(this.orderArray,"this.orderArray000")
},
分类:
JS/jQuery
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix