stk-table-vue（stk: sticky） 是一个基于 sticky 、vue、dom 的高性能虚拟列表。适用于动态数据展示场景。
功能特点
轻量、易用：基于 position:sticky 实现固定头与固定列，虚拟列表高度控制更方便。
高性能：支持横向、纵向、不等高虚拟列表。专注实时数据表格、行情表格、动态表格。
灵活：基于DOM，配置式自定义单元格，告别膨胀的插槽。
行/单元格高亮：封装了高亮行，高亮单元格的方法。用于数据更新提示。
完全类型化的api：灵活的 API 和完整的 TypeScript 类型。
兼容vue2.7：vue SFC + TS 源码，支持在 vue2项目中引入。
可定制的 stk-table-vue
表格的许多基础功能或许都不全面，但对二次开发预留了较多的定制空间，一些功能可以自行实现。
使用示例
安装
$ 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
