npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue3-el-table-sticky-plugin

v0.0.17

Published

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

Downloads

13

Readme

npm npm npm vue3 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[] | [] |