elementplus、vxe、surely 三种表格组件的封装

目录

1. element-plus

1.1 功能描述

1.2 优缺点

1.3 全屏按钮组件

1.4 表格行密度组件

1.5 ElementPlus 表格组件

1.5.1 表格组件接收的数据 props

1.5.2 表格组件发送的事件 emit

1.5.3 表格顶部操作行

1.5.4 表格模板封装

2. vxe

2.1 功能介绍

2.2 vxe-table 表格组件

2.2.1 vxe-table 数据重载

2.2.2  表格组件发送的事件 emit

2.2.3 vxe-table 常见 API

2.2.4 表格模板封装

3. surely-table

3.1 功能介绍

3.2 surely-table 表格组件

3.2.1 表格组件发送的事件 emit

3.2.2 surely-table 常见 API

3.2.3 表格模板封装

3.2.4 调整 surely-table 样式

---

1. element-plus

Table 表格 | Element Plusa Vue 3 based component library for designers and developershttps://element-plus.gitee.io/zh-CN/component/table.html

1.1 功能描述

表头：

• 左侧操作按钮 —— 设置表格密度、设置表格全屏
• 右侧操作按钮 —— 针对 表格多行数据 进行操作
• 可以添加表格标题
• 可以调整 表头行 对齐方式
• 可以筛选

表身：

• 表格操作列 —— 针对 表格单行数据 进行操作
• 可以调整 表身行 对齐方式
• 可以自定义单元格样式

1.2 优缺点

• 优点：较为常见的一种表格，配置相对简单
• 缺点：数据量大时非常卡顿

1.3 全屏按钮组件

可以通过以下方式控制表格全屏状态：

• ESC 按键
• 点击切换全屏按钮 

 
<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-dropd