Repository
TableBase
Example
| 姓名 | 年龄 | 性别 |
|---|---|---|
lzp - x | 24 | male |
thy - x |  | female |
thy - x | 24 | female |
thy - x | 24 | female |
thy - x | 24 | female |
Code
new Vue({
el: '#table-base',
template: '<vue-table :heads="heads"' +
' :data="data"' +
' :headTrStyle="headTrStyle"' +
' :trStyle="trStyle"' +
' :evenTrStyle="evenTrStyle"' +
' @clickTr="log"' +
' @clickTd="log"' +
' @clickTh="log"></vue-table>',
data: function() {
return {
isMobile: isMobile,
heads: [
{
title: '姓名',
key: 'name',
style: { textAlign: 'left' },
tdStyle: { textAlign: 'right' },
formatter: function(item, key) {
return item[key] + ' - x'
},
},
{ title: '年龄', key: 'age' },
{ title: '性别', key: 'sex' },
],
data: tableData.slice(0, 5),
headTrStyle: { background: '#f8f9fb' },
trStyle: { background: '#fefefe' },
evenTrStyle: { background: '#fafafa' },
}
},
methods: {
log: function(val) {
console.log(val)
},
},
components: { 'vue-table': VueTable.TableBase },
})TableExtend
Example
Scrollable: You can custom the scrollbarProps({isMobile<Boolean>, maxHeight<String | Number>}, see in vue-scrollbar-live ) to realize this feature
Resizable: You can resize the table by drag the white boundaries between `th`
姓名
年龄
性别
Code
var tableExtend = new Vue({
el: '#table-extend',
template: '<vue-table ref="table"' +
' :heads="heads"' +
' :data="data"' +
' :headTrStyle="headTrStyle"' +
' :trStyle="trStyle"' +
' :evenTrStyle="evenTrStyle"' +
' :scrollbarProps="{isMobile:isMobile, maxHeight:\'50vh\'}"' +
' @clickTr="log"' +
' @clickTd="log"' +
' @clickTh="log"></vue-table>',
data: function() {
return {
isMobile: isMobile,
heads: [
{
title: '姓名',
key: 'name',
style: { textAlign: 'left' },
tdStyle: { textAlign: 'right' },
formatter: function(item, key) {
return item[key] + ' - x'
},
},
{ title: '年龄', key: 'age', width: isMobile ? 400 : 800 },
{ title: '性别', key: 'sex' },
],
data: tableData,
headTrStyle: { background: '#f8f9fb' },
trStyle: { background: '#fefefe' },
evenTrStyle: { background: '#fafafa' },
}
},
methods: {
log: function(val) {
console.log(val)
},
},
components: { 'vue-table': VueTable.TableExtend },
mounted: function() {
var that = this
setTimeout(function() {
that.$refs.table.sizeChange()
}, 500)
},
})