2020-01-13 16:55:59 +08:00
|
|
|
|
# Smart Table 组件库
|
2020-01-13 16:57:45 +08:00
|
|
|
|
|
|
|
|
|
|
**专处理纯静态table固定头列及排序功能**
|
|
|
|
|
|
|
2020-01-13 16:55:59 +08:00
|
|
|
|
此组件库常用于服务端处理数据后直接返回HTML渲染,在客户端需要表格的多样化功能。
|
|
|
|
|
|
|
|
|
|
|
|
-- 初衷 --
|
2020-01-13 16:57:45 +08:00
|
|
|
|
|
2020-01-13 16:55:59 +08:00
|
|
|
|
方便在服务端直接返回已经渲染好的table数据后,增加table的组件库功能(如头固定、左右列固定、排序功能)
|
|
|
|
|
|
此项目不依赖任何其他库,减少依赖
|
|
|
|
|
|
|
|
|
|
|
|
-- 设计 --
|
2020-01-13 16:57:45 +08:00
|
|
|
|
|
2020-01-13 16:55:59 +08:00
|
|
|
|
框架内核借鉴虚拟Dom实现,元素排序移动采用React的Diff算法实现,保证元素的可重复使用。增加throttle保证体验。
|
|
|
|
|
|
|
|
|
|
|
|
-- 优势 --
|
2020-01-13 16:57:45 +08:00
|
|
|
|
|
2020-01-13 16:55:59 +08:00
|
|
|
|
- 支持多元化头部
|
|
|
|
|
|
- 轻量,使用方便
|
|
|
|
|
|
- 性能高
|
|
|
|
|
|
|
|
|
|
|
|
## 体验
|
|
|
|
|
|
可直接访问dist/index.html
|
2020-01-13 16:25:20 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 启动项目
|
2020-01-13 17:01:07 +08:00
|
|
|
|
```
|
2020-01-13 16:25:20 +08:00
|
|
|
|
npm run serve
|
2020-01-13 17:01:07 +08:00
|
|
|
|
```
|
2020-01-13 16:25:20 +08:00
|
|
|
|
|
|
|
|
|
|
## build 流程
|
2020-01-13 17:01:07 +08:00
|
|
|
|
```
|
2020-01-13 16:25:20 +08:00
|
|
|
|
npm run build
|
2020-01-13 17:01:07 +08:00
|
|
|
|
```
|
2020-01-13 16:25:20 +08:00
|
|
|
|
|
|
|
|
|
|
### 使用方法
|
2020-01-29 14:06:51 +08:00
|
|
|
|
引入 In browser:
|
2020-01-13 16:55:59 +08:00
|
|
|
|
```
|
2020-01-29 14:06:51 +08:00
|
|
|
|
<script type="text/javascript" src="./dist/smartTable.[chunkhash].js"></script>
|
2020-01-13 16:55:59 +08:00
|
|
|
|
```
|
|
|
|
|
|
使用
|
2020-01-13 16:25:20 +08:00
|
|
|
|
```
|
2020-01-29 13:04:18 +08:00
|
|
|
|
new SmartTable({
|
|
|
|
|
|
selector: '#smartTable1'
|
2020-01-28 14:20:55 +08:00
|
|
|
|
})
|
2020-01-29 13:04:18 +08:00
|
|
|
|
new SmartTable({
|
2020-01-28 14:20:55 +08:00
|
|
|
|
selector: '#smartTable2',
|
2020-01-29 13:04:18 +08:00
|
|
|
|
tableHeight: 300,
|
|
|
|
|
|
textAlign: 'left',
|
|
|
|
|
|
size: 'middle'
|
2020-01-28 14:20:55 +08:00
|
|
|
|
})
|
2020-01-13 16:55:59 +08:00
|
|
|
|
```
|
|
|
|
|
|
API Demo
|
|
|
|
|
|
```
|
2020-01-20 11:28:19 +08:00
|
|
|
|
<table stripe>
|
|
|
|
|
|
<th colspan="1" rowspan="3" fixed sort="number"></th>
|
|
|
|
|
|
<th colspan="1" rowspan="3" sort fixed></th>
|
|
|
|
|
|
<th colspan="5" rowspan="1" sort></th>
|
2020-01-13 16:55:59 +08:00
|
|
|
|
<th colspan="1" rowspan="3" fixed></th>
|
|
|
|
|
|
<tr unsort></tr>
|
2020-01-13 16:25:20 +08:00
|
|
|
|
```
|