0.1.4 • Published 1 year ago
vue3-scroll-table v0.1.4
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 | 列宽 | - | 否 |
本地开发调试
- 在根目录依次执行
# 安装依赖
npm ci
# 实时编译代码
npm run dev- 进入 example 目录依次执行
# 安装依赖
npm ci
# 实时编译代码
npm run dev此时，修改 根目录 或者 example目录 的任何代码都会导致项目重新打包构建。