vue3-el-table-sticky-plugin

vue3-el-table-sticky-plugin

> 一个让 element-plus el-table 表头部吸顶的vue3插件

实现思路

节点中设置的 top 值是基于 body 进行设置的因为业务场景不一样，所有节点唯一的共同点就是 body。

安装

npm i vue3-el-table-sticky-plugin -S

使用前注意

1. parent 滚动容器，默认为body。(参数优先级 指令使用处 > 指令注册处 > 插件兜底(body节点))

2. top 可选参数 (参数优先级 指令使用处 > 指令注册处 > 插件兜底(基于当前table-header距离body的top值))

3. willBeChangeElementClasses 可选参数 (参数优先级 指令使用处 > 指令注册处

4. 实际使用情况还会更复杂 本插件只是在理想状态下面做的封装 如有不足还请指出

引入

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import Vue3TableStickyPlugin from 'vue3-el-table-sticky-plugin';
const app = createApp(App);
// 注入全局指令
app.use(Vue3TableStickyPlugin);
app.mount('#app');

使用

<!-- xxx.vue -->
<template>
  <el-container class="layout-main">
    <el-header>头部导航栏</el-header>
    <el-container class="layout-body">
      <el-aside class="layout-aside"> 左侧菜单栏 </el-aside>
      <el-main class="layout-page">
        <el-main class="page-content">
          <!-- 因为这个只是开发测试demo 所以就写在一个文件里面 就行本人喜欢将固定的滚动写在layout布局里面 极端场景会将滚动写在具体的业务 .vue文件的根节点上 -->
          <!-- 业务 .vue文件的根节点 -->
          <div class="not-layout-page">
            <el-form inline class="table-top-dom">
              <el-form-item
                :label="formItem.label"
                v-for="formItem in elFormItemsState.elFormItems"
              >
                <el-input placeholder="Approved by" />
              </el-form-item>
            </el-form>
            <el-table
              class="el-table-sticky"
              v-sticky="{
                top: stickyTopValue,
                parent: '.not-layout-page',
                willBeChangeElementClasses: ['.table-top-dom'],
              }"
              :data="tableDataState.tableData"
              :header-cell-style="{ background: 'rgb(0, 0, 255)' }"
              border
              style="100%"
            >
              <el-table-column fixed="left" prop="date" label="Date" width="150"></el-table-column>
              <el-table-column fixed="left" prop="name" label="Name" width="250" />
              <el-table-column prop="state" label="State" width="250" />
              <el-table-column prop="city" label="City" width="250" />
              <el-table-column prop="address" label="Address" width="620" />
              <el-table-column fixed="right" prop="zip" label="Zip" width="120" />
              <el-table-column fixed="right" label="操作" width="180">
                <template #default>
                  <el-button link type="primary" size="small" @click="handleAddFormItems(1)">
                    给表单添加一条数据
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-main>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
  import { app } from './App';
  const { stickyTopValue, elFormItemsState, tableDataState, handleAddFormItems } = app();
</script>
<style lang="less" scoped>
  .layout-main {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    flex-basis: auto;
    box-sizing: border-box;

    .el-header {
      background-color: rgb(0, 21, 41);
      color: #fff;
      font-size: 16px;
      font-family: 'Courier New', Courier, monospace;
      font-weight: 600;
      text-align: center;
      line-height: 60px;
    }

    .layout-body {
      display: flex;
      overflow: hidden;

      .layout-aside {
        width: 200px;
        background-color: rgb(0, 21, 41);
        transition: all 0.4s ease 0s;
        color: #fff;
        font-size: 16px;
        font-family: 'Courier New', Courier, monospace;
        font-weight: 600;
        text-align: center;
        line-height: 60px;
      }

      .layout-page {
        overflow: hidden;
        --el-main-padding: 10px;
        padding: var(--el-main-padding);
        flex: 1;
        display: flex;
        flex-direction: column;

        .page-content {
          padding: 0;
          overflow-y: auto;
          flex: 1;
          width: 100%;

          .not-layout-page {
            height: 100%;
            overflow-y: auto;
          }
          .table-top-dom {
            box-sizing: border-box;
            padding: 10px;
            width: 50%;
            background-color: #fcc630;
            // overflow-anchor: none;

            :deep(.el-form-item__label) {
              color: #002ea6;
              font-weight: 600;
              font-family: 'MONACO';
            }
          }
        }

        .page-footer {
          width: 100%;
          // background-color: #ccc;
          padding: 0.5em 10px;
          border-top: 1px dashed #ccc;
          border-bottom: 1px dashed #ccc;
        }
      }
    }
  }
</style>

// app.ts
import { onMounted, reactive, ref } from 'vue';

export const app = function () {
  const stickyTopValue = ref<number>(0);
  const elFormItemsState = reactive<{
    elFormItems: Array<{ label: string }>;
  }>({
    elFormItems: [],
  });
  const tableDataState = reactive<{
    tableData: Array<{
      date: string;
      name: string;
      state: string;
      city: string;
      address: string;
      zip: string;
      tag: string;
    }>;
  }>({
    tableData: [],
  });
  // 模拟数据
  for (let index = 0; index < 49; index++) {
    tableDataState.tableData.push({
      date: '2016-05-03',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    });
  }
  tableDataState.tableData.unshift({
    date: '第一条数据',
    name: '第一条数据',
    state: '第一条数据',
    city: '第一条数据',
    address: '第一条数据',
    zip: '第一条数据',
    tag: '第一条数据',
  });

  const handleAddFormItems = (formItemCount: number) => {
    for (let index = 0; index < formItemCount; index++) {
      elFormItemsState.elFormItems.push({ label: 'test-label' });
    }
  };

  const handleAddTableData = () => {
    tableDataState.tableData.push({
      date: '添加的数据',
      name: '添加的数据',
      state: '添加的数据',
      city: '添加的数据',
      address: '添加的数据',
      zip: '添加的数据',
      tag: '添加的数据',
    });
  };
  onMounted(() => {
    // 监听节点class 为 table-top-dom 的高度变化
    const tableTopDom = document.querySelector('.table-top-dom');
    const tableElementResizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        const targetElement = entry.target as HTMLDivElement;
        stickyTopValue.value = targetElement.getBoundingClientRect().top;
      }
    });
    tableTopDom && tableElementResizeObserver.observe(tableTopDom);

    handleAddFormItems(3);
  });

  return {
    stickyTopValue,
    elFormItemsState,
    tableDataState,
    handleAddTableData,
    handleAddFormItems,
  };
};

可把上述代码复制到自己项目里面试试

OPTIONS

参数	说明	类型	默认值
top	吸顶的时候 距离顶部多少距离，可以不用传递	number	不传递的话就是 按照当前距离固定
parent	当前页面滚动的节点，如果是 document.body 可以不用传递	string	body
willBeChangeElementClasses	会影响 tableHeader 到 body 顶部距离的 dom 节点(tableHeader 和 body 顶部之间高度会发生变化的 dom 节点，一般没有，动态表格、动态表单会存在这种情况)	string[]	[]