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，也许我的配置有问题
- 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>
- ts
<script lang="ts" setup>
import { h, ref, reactive } from 'vue';
import { ElButton, ElTag } from 'element-plus';
import type { Column } from 'element-plus';
// 展开的key
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: () => '新增' }
),
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>
- 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>
