基于element-ui封装的table

在工作中经常会遇到需要数据以表格形式展示出来,但是一旦展示的数据过多,会导致table冗余,故通常需要自行封装table简化代码,提高复用性,如下:





给表格中的数据进行排序处理:

//  sort   el-table回传表格排序方式
// historyData 历史表格数据
// tmp 表格首行数据(固定)
// self 指针 (this指向)
// table 表格数据名(默认'tableData')

function sortCallBack(tmp, self, table, callback) {
	self[table].splice(0, 1)
	self[table] = self[table].sort(callback)
	self[table].unshift(tmp)
}
export function sortChange(sort, historyData, tmp, self, table = 'tableData') {
	if (sort.order === 'descending') {
		//降序
		sortCallBack(tmp, self, table, (a, b) => {
			return Number(b[sort.prop]) - Number(a[sort.prop])
		})
	} else if (sort.order === 'ascending') {
		// 升序
		sortCallBack(tmp, self, table, (a, b) => {
			return Number(a[sort.prop]) - Number(b[sort.prop])
		})
	} else {
		//还原  注意堆栈与引用变量是否采取深浅拷贝
		self[table] = [ ...historyData ]
	}
}

如何引用 如下:


你可能感兴趣的:(vue,element-ui,前端)