element-plus 的 el-table-v2 虚拟化表格 的使用

element-plus 的 虚拟化表格 的使用 el-table-v2

在文档中已经提到 该组件仍在测试中，生产环境使用可能有风险。
并且有一些 API 并未在此文档中提及，因为部分还没有开发完全......

所以在使用的时候有一些坑，我使用的版本是 "element-plus": "2.3.1",

使用场景： 在没有使用分页等方式而数据数量很大的时候需要，直接使用表格就会出现渲染太慢，影响使用体验，当然也有其他方式，如 ： vue-virtual-scroller

在使用之前应该注意其语法的问题，在官方的 Virtualized Table 虚拟化表格文档的例子中有 ts 和 tsx的区别， tsx需要安装支持 tsx的语法插件和相应的配置

• tsx 的安装 （也可以不使用 使用 vue3里面的 h() 函数）

// 安装
npm i @vitejs/plugin-vue-jsx

// 配置 vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx';

export default defineConfig({
  plugins: [vue(),vueJsx()]
})
 

// 配置tsconfig.json
{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
    ...
  },
  ...
}

更多tsx的使用方法

使用tsx 实例 可 查看文档

使用 ts h()函数 创建 el-table-v2：

h()函数：
第一个参数type:既可以是一个字符串 (用于原生元素) 也可以是一个 Vue 组件定义
第二个参数props:是要传递的 prop,可选
第三个参数children:是子节点或内容 ,可选

// 除了 type 外，其他参数都是可选的
h('div')
// children 可以是一个字符串
h('div', { id: 'foo' }, 'hello')

el-table-v2 使用：

eg: 例如后台管理系统的 菜单管理 页面

功能点有：
			el-table-v2，全部展开/收起，自动调整大小（实际有bug），loading

bug点：
			1.自动大小实际只是整个表格，每列的minWith没有生效，github的issue中也有人提到
			2.表格没有border需要自行写样式
			3.列上面只写了width 使用 fixed width生效，不使用fixed，width有点像maxWidth；反正列不能自动变化width，也许我的配置有问题

1. html 的页面
   表格上面的 和 列上面的 width 和 height 是必填的，其他属性参考文档

<template>
	<div style="width: 800px; height: 70vh; padding: 15px">
		<el-button @click="expandAll"> 全部展开/收起 </el-button>

		<el-auto-resizer>
			<template #default="{ height, width }">
					<el-table-v2
						v-model:expanded-row-keys="expandedRowKeys"
						:columns="columns"
						:data="state.dataList"
						expand-column-key="name"
						row-key="id"
						:width="width"
						:height="height - 8"
						fixed
						class="table-container-my"
					>
						<template #overlay v-if="state.loading">
							<div class="el-loading-mask" style="display: flex; align-items: center; justify-content: center" v-loading="state.loading"></div>
						</template>

						<!-- 超出显示的内容  可以不要，会自动有原生的 -->
						<!-- <template #cell="{ column, rowData: row }"> -->
						<!-- 需要判断 是否超出宽度 <span>{{ row[column.key] }}</span> -->
						<!-- 	<el-tooltip :content="row[column.key]">
								<span class="cell-content">{{ row[column.key] }}</span>
							</el-tooltip>
						</template>  -->
					</el-table-v2>
				</template>
		</el-auto-resizer>
	</div>
</template>

2. ts

<script lang="ts" setup>
import { h, ref, reactive } from 'vue';

import { ElButton, ElTag } from 'element-plus';
import type { Column } from 'element-plus';

// 展开的key  取值为 row-key 绑定的数据 eg：[1,2,3]
const expandedRowKeys = ref<string[]>([]);

// 列数据
const columns: Column<any>[] = [
	{
		key: 'id',
		dataKey: 'id',
		title: 'ID',
		width: 140,
		hidden: true,
	},
	{
		key: 'name',
		dataKey: 'name',
		title: '菜单名称',
		width: 140,
	},
	{
		key: 'path',
		dataKey: 'path',
		title: '路由',
		width: 140,
	},
	{
		key: 'permission',
		dataKey: 'permission',
		title: '权限标识',
		width: 140,
	},
	{
		key: 'isKeepAlive',
		dataKey: 'isKeepAlive',
		title: '缓冲',
		width: 140,
		cellRenderer: ({ rowData }) => {
			return h(
				ElTag,
				{ type: rowData.meta.isKeepAlive ? 'success' : 'info', 'disable-transitions': true },
				{ default: () => (rowData.meta.isKeepAlive ? '开启' : '关闭') }
			);
		},
	},

	{
		key: 'handle',
		title: '操作',
		width: 160,
		cellRenderer: ({ rowData }) => {
			return h('div', null, [
				h(
					ElButton,
					{
						link: true,
						type: 'primary',
						vAuth: "'sys_menu_add'",
						onClick: () => handleAdd('add', rowData),
					},
					{ default: () => '新增' }
				),
				// 如果不需要显示这个 可以使用三目运算 is ? h(...) : null
				h(
					ElButton,
					{
						link: true,
						type: 'primary',
						vAuth: "'sys_menu_edit'",
						onClick: () => handleEdit('edit', rowData),
					},
					{ default: () => '修改' }
				),
				h(
					ElButton,
					{
						link: true,
						type: 'primary',
						vAuth: "'sys_menu_del'",
						disabled: deleteMenuDisabled(rowData),
						onClick: () => handleDelete(rowData),
					},
					{ default: () => '删除' }
				),
			]);
		},
	},
];

const state: any = reactive<any>({
	loading: false,
	dataList: [],
	queryForm: {
		menuName: '',
	},
});

const getList = (type?: string, row?: any) => {
	// ...
};

const handleAdd = (type?: string, row?: any) => {
	// ...
};
const handleEdit= (type?: string, row?: any) => {
	// ...
};
const handleDelete= (row?: any) => {
	// ...
};

//是否禁用删除
const menuDeleteDisabled = (row: any) => {
	return (row.children || []).length > 0;
};


// 其他 方法 
// ......
</script>

3. css
   由于 v2 还在开发测试，功能不齐全，所以如文档中例子一样 没有相应的 border 等样式

在这里简单的写了下，

下面的变量自行替换

<style scoped lang="scss">
:deep(.table-container-my) {
	background: var(--el-table-row-hover-bg-color);
	color: var(--el-text-color-primary);
	border: var(--el-table-border);

	// head
	.el-table-v2__header-wrapper {
		border-right: 1px var(--el-table-border-color) solid;
		background: var(--el-table-row-hover-bg-color);
	}
	.el-table-v2__header {
		background: var(--el-table-row-hover-bg-color);
	}
	.el-table-v2__header-cell {
		background: var(--el-table-row-hover-bg-color);
		border-right: 1px var(--el-table-border-color) solid;
		color: var(--el-text-color-primary);
	}

	// body
	.el-table-v2__row-cell {
		border-right: 1px var(--el-table-border-color) solid;
	}
	.el-vl__wrapper.el-table-v2__body {
		border-right: 1px var(--el-table-border-color) solid;
	}

	// last
	.el-table-v2__header-cell:last-child {
		border-right: 0;
	}
	.el-table-v2__row-cell:last-child {
		border-right: 0;
	}
}
</style>

================================

使用中发现，在路由的tab切换时，有缓存的时候且 滚动了，会有一部分的空白 ，解决办法：
使用table的@scroll=“handleScroll” ，记录下滚动的距离
在使用 scrollToTop 进行 设置滚动，注意需要变一下值，否则还是会有空白，当然也可以直接设置为0每次进入时回到顶部也可
eg：

let scrollToTopNum = ref(0);
const handleScroll = (obj: any) => {
	scrollToTopNum.value = obj.scrollTop;
};

// 缓存引起的 可以使用 onActivated
let _num = Number(scrollToTopNum.value) + 1;
tableRef.value.scrollToTop(_num || 0);