elementUItable实现表格的多列排序（avue源码中修改）.pdfVIP

elementUItable实现表格的多列排序（avue源码中修改） ⼀、效果图 ⼆、主要实现代码 1、el-table组件 :default-sort=getDefaultSortParams //设置排序默认值 :header-cell-class-name=headerCellClassNameFun //设置头部样式⽅法 @sort-change=sortChange //排序事件 2、data sortParams: {},//记录排序参数 isFirstTableSort: true,//是否⾸次排序 3、props //是否多列排序 isMultiOrder: { type: Boolean, default: false, }, headerCellClassName: Function,//头部样式⽅法 tableOption.defaultSort:Onject，//默认排序 4、处理默认排序computed getDefaultSortParams() { let sortParams = {}; if (this.isFirstTableSort) { sortParams = this.vaildData(this.tableOption.defaultSort, { prop: createTime, order: descending, }); let name = sortParams.prop; this.sortParams = { [name] : sortParams.order, }; this.formateOrderData(this.sortParams, false); this.isFirstTableSort = false ; } return sortParams; }, 5、headerCellClassNameFun ⽅法 headerCellClassNameFun({ column, rowIndex }) { //处理默认值的情况 if (this.isMultiOrder) { if ( !this.validatenull(column.order) this.validatenull(column.multiOrder) ) { column.multiOrder = column.order ; } else { column.order = column.multiOrder; } } if (typeof this.headerCellClassName == function) { return this.headerCellClassName({ column, rowIndex }); } }, 6、驼峰转下划线⽅法 camecaseToLine(name) { return name.replace(/([A-Z])/g, _$1).toLowerCase(); }, 7、排序回调 sortChange({ column, prop, order }) { if (this.isMultiOrder) { column.multiOrder = order ; } else { //清空缓存的数据 this.sortParams = {}; } this.sortParams[prop] = order ; //格式化数据 this.formateOrderData(this.sortParams, true); }, 8、格式化数据 formateOrderData(sortParams, isAutoRequest) { let val = { descending: [], ascending: [], }; for (let key in sortParams)