vue3 element-plus table表格多列排序,记录排序状态,重置时清空排序

最新推荐文章于 2024-09-13 14:34:15 发布

懋之懋续

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量342

点赞数 5

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/weixin_44138241/article/details/141925078

版权

开发过程中,需要多列进行排序.参考官网发现只有单列排序的事例.

			<el-table
				ref="publicTableList"
				:data="state.dataList"
				v-loading="state.loading"
				border
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle.headerCellStyle"
				@selection-change="selectionChangHandle"
				@sort-change="sortChangeHandle"
				:header-cell-class-name="handleHeaderCellClass"
			>
				<el-table-column type="selection" width="40" align="center" />
				<el-table-column type="index" label="#" width="40" />
				<template v-for="item in columns" :key="item.prop">
					<el-table-column
						:prop="item.prop"
						:label="item.label"
						show-overflow-tooltip
						v-if="item.isShow"
						:sortable="item.prop != 'operation' && 'custom'"
					>
						<template #default="scope">
							<template v-if="item.prop == 'brandId'">
								<div>展示内容</div>
							</template>

							<template v-if="item.prop == 'operation'">
								<el-button>操作xx</el-button>
							</template>
						</template>
					</el-table-column>
				</template>
			</el-table>

:sortable=“item.prop != ‘operation’ && ‘custom’” 定义排序通过调用后端接口,具体参考官网

// 排序触发事件
	const sortChangeHandle = (column: any) => {
		xxxxx 其它事件
		if (column.order && state.orderArray) {
			//参与排序
			let flagIsHave = false;
			state.orderArray.forEach((item) => {
				if (item.prop === prop) {
					item.order = column.order;
					flagIsHave = true;
				}
			});
			if (!flagIsHave) {
				state.orderArray.push({
					prop: prop,
					order: column.order,
				});
			}
		} else {
			if (state.orderArray) {
				const filterOrder = filter(state.orderArray, item => item.prop !== prop)
				state.orderArray = filterOrder
			}
		}
		query();
	};
	//添加排序方法（可把多个字段共同加入排序）
	const handleHeaderCellClass = ({ row, column }) => {
		state.orderArray && state.orderArray.forEach((item) => {
			if (column.property === item.prop) {
				column.order = item.order;
			}
		});
	}

最后重置时清空排序状态

// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	// 清空多选
	selectObjs.value = [];
	nextTick(() => {
		publicTableList.value?.clearSort();
		//重置选中筛选条件
		const columns = publicTableList.value.$el.querySelectorAll('th.el-table__cell');
		columns.forEach((item) => {
			item.classList.remove('ascending', 'descending');
		});
		getDataList();
	});
};

const columns = publicTableList.value.$el.querySelectorAll('th.el-table__cell'); columns.forEach((item) => { item.classList.remove('ascending', 'descending'); })关键代码手动清除.开发时间紧,暂时发现这个方法好使用.
如果大家有更好的办法可以清空状态,麻烦分享一下.十分感谢