本文详细介绍了element-plus、vxe和surely三种Vue表格组件的封装，包括功能描述、优缺点、全屏与行密度组件、事件监听和API。element-plus表格在数据量大时卡顿，而vxe-table提供了虚拟滚动以解决性能问题，surely-table在大数据量合并时表现出色，但需付费使用。
目录
1. element-plus
https://element-plus.gitee.io/zh-CN/component/table.html1.1 功能描述
表头：
- 左侧操作按钮 —— 设置表格密度、设置表格全屏
- 右侧操作按钮 —— 针对 表格多行数据 进行操作
- 可以添加表格标题
- 可以调整 表头行 对齐方式
- 可以筛选
表身：
- 表格操作列 —— 针对 表格单行数据 进行操作
- 可以调整 表身行 对齐方式
- 可以自定义单元格样式
1.2 优缺点
- 优点：较为常见的一种表格，配置相对简单
- 缺点：数据量大时非常卡顿
1.3 全屏按钮组件
可以通过以下方式控制表格全屏状态：
- ESC 按键
- 点击切换全屏按钮
<!--
* @Description: 表格全屏按钮
* @Author: lyrelion
* @Date: 2022-04-12 10:41:17
* @LastEditors: lyrelion
* @LastEditTime: 2022-09-29 09:11:12
-->
<template>
<el-tooltip
effect="dark"
:content="fullScreen ? '取消全屏' : '全屏'"
placement="top"
:auto-close="1000"
>
<span class="tooltip-outline-none" @click="handleSetFullScreen()">
<el-icon v-if="!fullScreen" class="pointer tooltip-icon" :size="18">
<full-screen />
</el-icon>
<i v-if="fullScreen" class="fa fa-compress pointer tooltip-icon"></i>
</span>
</el-tooltip>
</template>
<script lang="ts">
import {
reactive,
toRefs,
defineComponent,
onMounted,
onUnmounted,
} from 'vue';
export default defineComponent({
name: 'TFullScreenButton',
emits: ['full-screen-change'],
setup(props, { emit }) {
// 响应式数据
const state = reactive({
// 是否全屏
fullScreen: false,
});
/**
* esc 按键事件
*/
const keydownEvent = (event: KeyboardEvent) => {
if (document.fullscreenElement) {
document.exitFullscreen();
}
if (event.keyCode === 27) {
state.fullScreen = false;
}
// 发送事件，切换全屏状态
emit('full-screen-change', state.fullScreen);
};
/**
* esc 窗口尺寸变化事件
*/
const windowResizeEvent = () => {
state.fullScreen = document.fullscreen;
// 发送事件，切换全屏状态
emit('full-screen-change', state.fullScreen);
};
/**
* 设置控制全屏显示状态值
*/
const handleSetFullScreen = () => {
// 设置状态值
state.fullScreen = !state.fullScreen;
// 浏览器全屏模式
if (state.fullScreen && document.body.requestFullscreen) {
document.body.requestFullscreen();
} else if (document.fullscreenElement) {
// 浏览器退出全屏模式
document.exitFullscreen();
}
// 发送事件，切换全屏状态
emit('full-screen-change', state.fullScreen);
};
onMounted(async () => {
// 监听 esc 按键事件 退出全屏
window.addEventListener('keyup', keydownEvent, false);
// 监听窗口尺寸改变事件 退出全屏
window.addEventListener('resize', windowResizeEvent, false);
});
onUnmounted(() => {
// 移除监听事件
window.removeEventListener('keyup', keydownEvent);
window.removeEventListener('resize', windowResizeEvent);
});
return {
...toRefs(state),
handleSetFullScreen,
};
},
});
</script>
1.4 表格行密度组件
使用 el-dropdown 组装出一个下拉框
用户选中紧凑程度后，组件抛出用户所选信息
表格组件会接收此组件抛出的密度信息
<!--
* @Description: 表格密度设置按钮
* @Author: lyrelion
* @Date: 2022-04-12 10:18:34
* @LastEditors: lyrelion
* @LastEditTime: 2022-04-12 10:40:56
-->
<template>
<el-dropdown trigger="click" @command="setTableDensity">
<el-tooltip content="密度" effect="dark" placement="top">
<el-icon class="pointer tooltip-icon" :size="18">
<operation />
</el-icon>
</el-tooltip>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-for="item in [
{ label: '正常', value: 'small' },
{ label: '紧凑', value: 'mini' },
{ label: '宽松', value: 'medium' },
]"
:key="item.label"
:class="{ active: tableSize === item.value }"
:command="item.value"
>
{
{ item.label }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent } from 'vue';
export default defineComponent({
name: 'TDensityButton',
emits: ['table-size-change'],
setup(props, { emit }) {
// 响应式数据
const state = reactive({
// 表格尺寸
tableSize: 'mini',
});
/**
* 设置表格尺寸（密度）
* @param command 表格尺寸（密度）
*/
const setTableDensity = (command: string) => {
state.tableSize = command;
// 发送事件，告诉父组件表单尺寸改变了
emit('table-size-change', state.tableSize);
};
return {
...toRefs(state),
setTableDensity,
};
},
});
</script>
1.5 ElementPlus 表格组件
1.5.1 表格组件接收的数据 props
表头配置项数据类型
// 表格表头配置项
interface TableHeaderOptions {
prop?: string; // 当前列对应键名
label: string; // 当前列对应表头
width?: string | number; // 当前列对应宽度
minWidth?: string | number; // 对应列的最小宽度
align?: string; // 当前列数据对齐方式
headerAlign?: string; // 当前列表头对齐方式
fixed?: true | 'left' | 'right' | ''; // 当前列固定方式
sortable?: string | boolean | undefined; // 排序方式
slot?: string | undefined; // 插槽
type?: string; // 表格类型
action?: boolean; // 是否为操作列
}具体接收的 props 如下所示
还写了 inheritAttrs: true, 用于继承 elementPlus 组件本身就能接收的属性
<!-- <span>表格组件接收到的 $attrs: {
{ $attrs }}</span> -->
inheritAttrs: true,
props: {
// 表格数据
tableData: {
type: Array,
required: true,
default: () => [],
},
// 表头配置项
tableHeaderOpitons: {
type: Array as PropType<TableHeaderOptions[]>,
required: true,
default: () => [],
},
// 判断是否禁用多选方法（返回true不禁用）
selectable: {
type: Function,
default: (row: any, index: number) => true,
},
// 页码
pageNum: {
type: Number,
default: 1,
},
// 每页条数
pageSize: {
type: Number,
default: 10,
},
// 是否开启序号列(开启的话,必须传入每页条数/页码)
openIndexColumn: {
type: Boolean,
default: false,
},
// 是否开启选择列
openSelectColumn: {
type: Boolean,
default: false,
},
// 要修改背景的列 index 数组
changeBgColumnIndex: {
type: Array,
default: () => [],
},
// 要修改的背景色
changeBgColumnColor: {
type: String,
default: '#F5F7FA',
},
// 操作列是否显示
showOperationColumn: {
type: Boolean,
default: true,
},
// 表格顶部左侧列显隐控制
showTableLeftBtn: {
type: Object,
default: () => ({
densityBtn: true,
fullScreenBtn: true,
}),
},
// 是否开启斑马纹
openStripe: {
type: Boolean,
default: true,
},
},1.5.2 表格组件发送的事件 emit
emits: [
'table-sort-change', // 表格列排序事件
'table-choose-change', // 表格行选中事件
'table-cell-click', // 单元格点击事件
'update:fullScreen', // 更新全屏状态
],表格列排序事件ÿ
最低0.47元/天 解锁文章
扫一扫
573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
