el-table展示大批量数据卡顿 展示数据不完整 大批量数据显示优化

替换el-table为vxe-table

	<!-- 数据列表 -->
			<vxe-table
				ref="tableRef"
				:data="state.dataList"
				v-loading="state.loading"
				border
				highlight-current-row
				height="73%"
				style="width: 100%; height: 65vh"
				align="center"
				:loading="state.loading"
				header-align="center"
				@checkbox-change="handleSelectionChange"
				@checkbox-all="handleSelectionChange"
				show-header-overflow
				show-overflow
				:row-config="{ isCurrent: false, isHover: true, height: 65 }"
				:loading-config="{ icon: 'vxe-icon-indicator roll', text: '' }"
				:column-config="{ resizable: true }"
				:checkbox-config="{ checkField: 'checked' }"
				:header-cell-style="{ color: '#303133' }"
				:cell-style="{ color: '#000000' }"
				:tooltip-config="{ zIndex: 9999 }"
				:tooltip="true"
			>
				<vxe-column type="checkbox" fixed="left" width="50" align="center" />
				<vxe-column fixed="left" type="seq" title="#" width="60" />
				<vxe-column field="name" align="center" :title="t('userpost.jobTitle')" sortable show-overflow-tooltip />
				<vxe-column field="sort" align="center" :title="t('userpost.sort')" sortable show-overflow-tooltip />
				<vxe-column field="createTime" align="center" :title="t('userpost.creationTime')" sortable show-overflow-tooltip />
				<vxe-column field="updateTime" align="center" :title="t('userpost.modificationTime')" sortable show-overflow-tooltip />
				<vxe-column field="defaultFlag" align="center" :title="'默认'" show-overflow-tooltip>
					<template #default="scope">
						<el-switch v-model="scope.row.defaultFlag" @click="changeDefaultFlag(scope.row)"></el-switch>
					</template>
				</vxe-column>
				<vxe-column field="remark" align="center" :title="t('userpost.remark')" show-overflow-tooltip />

				<!-- 操作 -->
				<vxe-column :title="$t('common.action')" width="200">
					<template #default="scope">
						<el-button icon="edit-pen" @click="formDialogRef.openDialog([scope.row.id])" text type="primary" v-auth="'user_post_edit'"
							>{{ $t('common.editBtn') }}
						</el-button>
						<el-button icon="delete" @click="handleDelete([scope.row.id])" text type="primary" v-auth="'user_post_del'">
							{{ $t('common.delBtn') }}
						</el-button>
					</template>
				</vxe-column>
			</vxe-table>

  • 10
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值