vue 列表表格滚动加载数据，滚动导致勾选项取消

一、table滚动加载

const state = reactive({
	pageSize: 40,
	currentPage: 1, // 当前页
	total: 0, // 总条数
	listData: []//列表数据合集,
	tableData: []//最终展示的列表数据,
});
		
onMounted(() => {
	tableScroll();
});

// 表格滚动加载
function tableScroll() {
// 获取表格对象
	nextTick(() => {
		let dom = document.querySelector('.el-table__body-wrapper') as any;
		dom.addEventListener('scroll', () => {
			const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
			// 判断是否到底，可以加载下一页
			if (scrollDistance <= 1) {
				// 判断是否全部加载完成
				if (state.tableData.length >= state.total) {
					// console.log('加载完了');
				} else {
					//当前页数小于总页数就请求
					state.currentPage++; //当前页数自增
					let a = state.listData.slice((state.currentPage - 1) * state.pageSize, state.currentPage * state.pageSize);
					state.tableData = [...state.tableData, ...a];
				}
			}
		});
	});
}

二、列表滚动加载

<div v-infinite-scroll="load" :infinite-scroll-disabled="disabled">	
	<el-row  v-for="item in tableData" :key="cItem.elementId">
		<el-col></el-col>
		<el-col></el-col>
	</el-row>
	<p v-if="dataLoading">加载中...</p>
	<p v-if="noMore">没有更多了~</p>
</div>

const state = reactive({
	pageSize: 40,
	currentPage: 1, // 当前页
	total: 0, // 总条数
	listData: []//列表数据合集,
	tableData: []//最终展示的列表数据,
});

// 无限滚动
const noMore: Ref = computed(() => {
	return state.tableData.length >= state.total;
});

const disabled: Ref = computed(() => {
	return state.dataLoading || noMore.value;
});

function load() {
	state.dataLoading = true;
	setTimeout(() => {
		if (state.tableData.length < state.total) {
			state.currentPage++;
			let a = state.listAllData.slice((state.currentPage - 1) * state.pageSize, state.currentPage * state.pageSize);
			state.tableData = [...state.tableData, ...a];
		}
		state.dataLoading = false;
	}, 400);
}

三、table滚动导致勾选项消失

el-table中的属性

1. el-table :row-key=“getRowKeys”
2. el-table-column :reserve-selection=“true”

<el-table ref="tableRef" :row-key="getRowKeys" @selection-change="handleSelectionChange"  :data="tableData" highlight-current-row>
	<el-table-column type="selection":reserve-selection="true" width="50"></el-table-column>
</el-table>

function getRowKeys(row:any){
	return  row.id //唯一性
}

即可实现滚动保留之前勾选的内容
但随之而来的是，刷新后怎么取消保留的勾选项呢？

tableRef.value.clearSelection()