vue3-scroll-table

模拟 Element 的 table 组件，添加了滚动功能

Demo: https://namewjp.github.io/vue3-scroll-table/

开始使用

安装

npm install -S vue3-scroll-table

全局注册

import vue3ScrollTable from 'vue3-scroll-table';
import 'vue3-scroll-table/dist/index.css';

app.use(vue3ScrollTable);

使用

<template>
  <scroll-table :data="tableData" hoverStop :height="200">
    <scroll-table-column prop="date" label="日期" />
    <scroll-table-column prop="name" label="姓名" />
    <scroll-table-column prop="address" label="地址" />
  </scroll-table>
</template>

API

ScrollTable

属性

名称	类型	描述	默认值	必填
data	DefaultRow[]	表格数据	[]	否
height	number	table 高，默认不滚动	-	否
interval	number	滚动间隔	2	否
transition	number	滚动过渡时间	1	否
hoverStop	boolean	hover 状态下是否停止滚动	false	否
showHeader	boolean	是否显示头部	true	否
scrollCount	number	滚动个数	1	否

事件

名称	描述	参数
click	点击行回调	row, column, event

ScrollTableColumn

属性

名称	类型	描述	默认值	必填
label	string	列名称	-	否
prop	string	对应列内容的字段名	-	是
width	string/number	列宽	-	否

本地开发调试

1. 在根目录依次执行

# 安装依赖
npm ci

# 实时编译代码
npm run dev

2. 进入 example 目录依次执行

# 安装依赖
npm ci 

# 实时编译代码
npm run dev

此时，修改 根目录 或者 example目录 的任何代码都会导致项目重新打包构建。