Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ektx/vtable
Vue.js table
https://github.com/ektx/vtable
table vuejs2
Last synced: about 2 months ago
JSON representation
Vue.js table
- Host: GitHub
- URL: https://github.com/ektx/vtable
- Owner: ektx
- Created: 2018-01-09T06:25:22.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-01-31T15:03:58.000Z (almost 7 years ago)
- Last Synced: 2024-11-03T20:36:04.002Z (2 months ago)
- Topics: table, vuejs2
- Language: HTML
- Size: 188 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# VTable
vue.js 表格效果
## 使用
```html
简单表格
...
...
// 4.实例化
var table = new Vue({
el: '#show-table',
data: {
// 表格中间内容
tableData: {},
// 表格的头信息,具体参考 demo
tableHeader: {}
},
mounted: function () {
var _ = this;
// 加载数据
$.ajax({
url: 'mock/table.json',
type: 'get'
})
.done(function(data) {
// 赋值给表格
_.tableData = data
})
.fail(function(err) {
// 请求数据错误时
console.error(err)
})
},
methods: {
holleEvt: function (data) {
console.log(data)
// data 返回以下信息
/*
// 当前状态
status: true,
// 状态翻译
statusMes: '展开',
// 当前行信息
tr: {
index: 0,
data: {...}
},
// 当前 td 信息
td: {
index: 0,
data: {...}
}
*/
}
}
})
```
1. 引用样式表
2. 添加组件模板（可以通过 ajax 加，参考 VTable.html）
3. 添加你要的生成的元素
4. 实例化对象，添加表格头等相关信息
5. 添加组件引用 VTable
## 参数
#### 主体说明
| 参数 | 说明 |
| ------ | ------------------------- |
| header | 表格头信息（必填） |
| data | 表格主体信息（必填） |
| left | 表格左侧信息（非必填） |
| toggle | 事件，展开收缩功能,返回状态与信息 |
| scroll | 事件，返回当前滚动条的信息，{top, left} |
```html
```
#### 头部说明
| 参数 | 说明 |
| -------- | ----------------------- |
| text | 显示内容 |
| width | 列宽，没有children时添加 |
| children | 子表信息 |
| type | leftAside 侧边专用，用于突出侧边区域 |
```javascript
// 表格头
var header = [
{
"text": "时间",
"width": 400,
"type": "leftAside"
},
{
"text": "2017",
"children": [
{
"text": "Q1",
"children": [
{
"text": "1月",
"width": 100
},
{
"text": "2月",
"width": 100
},
{
"text": "3月",
"width": 100
}
]
}
]
}
]
```