https://github.com/heftykoo/vue-bel-table
A vue table component that base on element ui.Just for using el-table component more convenient。 对element的table组件进行了封装，更方便地使用elment ui的el-table组件
https://github.com/heftykoo/vue-bel-table
Last synced: about 1 year ago
JSON representation
A vue table component that base on element ui.Just for using el-table component more convenient。 对element的table组件进行了封装，更方便地使用elment ui的el-table组件
- Host: GitHub
- URL: https://github.com/heftykoo/vue-bel-table
- Owner: HeftyKoo
- Created: 2017-03-30T07:30:45.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-20T03:41:17.000Z (about 9 years ago)
- Last Synced: 2025-03-31T14:11:22.242Z (about 1 year ago)
- Language: JavaScript
- Size: 8.08 MB
- Stars: 11
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-bel-table
[](https://github.com/yeyuqiudeng/vue-bel-table/issues)
[](https://github.com/yeyuqiudeng/vue-bel-table/network)
[](https://github.com/yeyuqiudeng/vue-bel-table/stargazers)
[](https://twitter.com/intent/tweet?text=Wow:&url=%5Bobject%20Object%5D)
[](https://nodei.co/npm/vue-bel-table/)
## Description
A vue table component that base on element ui.Just for using el-table component more convenient。
对element的table组件进行了封装，更方便地使用elment ui的el-table组件
## Dependency
* [^Vue2.0](https://github.com/vuejs/vue)
* [^Element 1.2.0](https://github.com/ElemeFE/element)
## Installation
```javascript
npm install vue-bel-table
```
## Usage
```javascript
import BelTable from 'vue-bel-table'
Vue.use(BelTable, options)
```
## Options
```javascript
options: {
table: Object, // 自定义table默认属性，必须为element ui支持的表格属性
column: Object // 自定义列默认属性，必须为element ui支持的列属性
}
// 如果不传递，默认属性如下
// 组件内的默认配置如下
table: { // table的默认属性
data: [],
maxHeight: 600,
border: true
},
column: { // column的默认属性
showOverflowTooltip: true,
headerAlign: 'center',
resizable: true
}
```
## Props
```javascript
data: Array, // 表格的数据，1.1.0 新增，如果存在，configs中的attr的中可以不存在data属性
configs: Object
// configs的具体配置如下
configs: {
table: { // 表格配置
default: {}, // 默认配置，配置属性要跟element ui的table attributes 一致，如果有配置，则忽略组件内defaultAttr的table默认配置
attr: {} // 配置属性要跟element ui的table attributes一致
},
columnDefault: {}, // column的默认配置，要跟element ui的column attributes一致，如果有配置，则忽略defaultAttr的column默认配置
columns: [ // column配置
{
attr: {}, // column的默认配置，要跟element的column attributes一致
scopedSlot: '', // scope slot名称
}
]
}
```
## events
跟element ui 的 events 一致
## Table Methods
跟element ui 的table methods 一致
## example
1.1.0后更推荐这样使用：
```vue
{{scope.row.date}}
export default {
data () {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
tableConfig: {
get () {
return {
columns: [
{
attr: {
type: 'selection',
width: 80,
align: 'center'
}
},
{
attr: {
prop: 'date',
label: '日期',
minWidth: 180,
scopedSlot: 'date',
}
},
{
attr: {
prop: 'name',
label: '姓名',
minWidth: 180
}
},
{
attr: {
prop: 'address',
label: '地址',
minWidth: 180
}
}
]
}
}
}
}
},
methods: {
toggleRowSelection (row) {
this.$refs.table.toggleRowSelection(row)
}
}
}
```
1.1.0以前的使用方式，1.1.0以后的版本同样兼容
```vue
{{scope.row.date}}
export default {
data () {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
computed: {
tableConfig: {
get () {
return {
table: {
attr: {
data: this.tableData
}
},
columns: [
{
attr: {
type: 'selection',
width: 80,
align: 'center'
}
},
{
attr: {
prop: 'date',
label: '日期',
minWidth: 180,
scopedSlot: 'date',
}
},
{
attr: {
prop: 'name',
label: '姓名',
minWidth: 180
}
},
{
attr: {
prop: 'address',
label: '地址',
minWidth: 180
}
}
]
}
}
}
},
methods: {
toggleRowSelection (row) {
this.$refs.table.toggleRowSelection(row)
}
}
}
```