StkTableVue_基于 sticky 、vue、DOM的高性能虚拟列表

Web前端开发网

fly63.com

首页资源工具文章教程栏目

StkTableVue

网站地址:https://ja-plus.github.io/stk-table-vue

GitHub:https://github.com/ja-plus/stk-table-vue

网站描述:基于 sticky 、vue、DOM的高性能虚拟列表

访问官网

GitHub

stk-table-vue（stk: sticky）是一个基于 sticky 、vue、dom 的高性能虚拟列表。适用于动态数据展示场景。

功能特点

轻量、易用：基于 position:sticky 实现固定头与固定列，虚拟列表高度控制更方便。

高性能：支持横向、纵向、不等高虚拟列表。专注实时数据表格、行情表格、动态表格。

灵活：基于DOM，配置式自定义单元格，告别膨胀的插槽。

行/单元格高亮：封装了高亮行，高亮单元格的方法。用于数据更新提示。

完全类型化的api：灵活的 API 和完整的 TypeScript 类型。

兼容vue2.7：vue SFC + TS 源码，支持在 vue2项目中引入。

可定制的 stk-table-vue

表格的许多基础功能或许都不全面，但对二次开发预留了较多的定制空间，一些功能可以自行实现。

比如表头点击筛选功能。
对于筛选功能，考虑到实际开发中，不同的项目使用的组件库，样式都不相同，如果提供内置的筛选功能，1.可能对整体风格会造成影响。2.对包体积控制有负面效果。因此暂未实现。
排序不能点击单个箭头。
也可以通过自定义表头单元格实现。
样式可以通过.stk-table选择器下的css变量进行更改。

使用示例

安装

$ npm install stk-table-vue

引入

import 'stk-table-vue/lib/style.css';

vue SFC 使用的时候引入，利于ts识别

<script lang="ts" setup>
import { StkTable } from 'stk-table-vue';
</script>
<template>
    <StkTable></StkTable>
</template>

dom

<script lang="ts" setup>
import { useTemplateRef, onMounted, onBeforeUnmount } from 'vue';
import StkTable from '../StkTable.vue';
import { StkTableColumn } from '../../src/StkTable/index';

const stkTableRef = useTemplateRef('stkTableRef'); // vue3.5+
// const stkTableRef = ref<InstanceType<typeof StkTable>>(); //vue3.2

type DataType = {
    id: string;
    name: string;
    age: number;
    address: string;
};
const columns: StkTableColumn<DataType>[] = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Age', dataIndex: 'age', key: 'age', align: 'right' },
    { title: 'Address', dataIndex: 'address', key: 'address' },
];
const dataSource: DataType[] = [
    { id: 'k1', name: 'Tom', age: 18, address: 'Beijing' },
    { id: 'k2', name: 'Jerry', age: 19, address: 'Shanghai' },
    { id: 'k3', name: 'Jack', age: 20, address: 'London' },
    { id: 'k4', name: 'Rose', age: 22, address: 'New York' },
];
let interval = 0;
onMounted(() => {
    interval = window.setInterval(() => {
        stkTableRef.value?.setHighlightDimRow(['k1']);
    }, 2000);
});

onBeforeUnmount(() => {
    window.clearInterval(interval);
});
</script>
<template>
    <StkTable ref="stkTableRef" row-key="id" :columns="columns" :>="dataSource"></StkTable>
</template>

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/4913