console
var Main = {
data() {
return {
tableColumn: [
{ type: 'seq', width: 60 },
{
title: '基本信息',
children: [
{ field: 'name', title: 'Name' },
{ field: 'num', title: 'Num' },
{ field: 'num0', title: 'Num' },
{ field: 'num1', title: 'Num',width:'200px' },
{ field: 'num2', title: 'Num',width:'300px' },
{ field: 'num3', title: 'Num',width:'300px' },
{ field: 'num4', title: 'Num',width:'400px' },
{ field: 'num5', title: 'Num',width:'500px' },
{ field: 'num6', title: 'Num',width:'400px' },
{ field: 'num7', title: 'Num',width:'200px' },
{ field: 'num8', title: 'Num',width:'100px' },
{ field: 'num9', title: 'Num',width:'300px' },
{ field: 'num10', title: 'Num',width:'400px'},
{ field: 'numa0', title: 'Num' },
{ field: 'numa1', title: 'Num',width:'200px' },
{ field: 'numa2', title: 'Num',width:'300px' },
{ field: 'numa3', title: 'Num',width:'300px' },
{ field: 'numa4', title: 'Num',width:'400px' },
{ field: 'numa5', title: 'Num',width:'500px' },
{ field: 'numa6', title: 'Num',width:'400px' },
{ field: 'numa7', title: 'Num',width:'200px' },
{ field: 'numa8', title: 'Num',width:'1000px' },
{ field: 'numa9', title: 'Num',width:'300px' },
{ field: 'numa10', title: 'Num',width:'400px'},
{ field: 'numa11', title: 'Num',width:'200px' },
{ field: 'numa21', title: 'Num',width:'300px' },
{ field: 'numa31', title: 'Num',width:'300px' },
{ field: 'numa41', title: 'Num',width:'400px' },
{ field: 'numa51', title: 'Num',width:'500px' },
{ field: 'numa61', title: 'Num',width:'400px' },
{ field: 'numa71', title: 'Num',width:'200px' },
{ field: 'numa81', title: 'Num',width:'1000px' },
{ field: 'numa91', title: 'Num',width:'300px' },
{ field: 'numa101', title: 'Num',width:'400px'},
{ field: 'anum', title: 'Num' },
{ field: 'anum0', title: 'Num' },
{ field: 'anum1', title: 'Num',width:'200px' },
{ field: 'anum2', title: 'Num',width:'300px' },
{ field: 'anum3', title: 'Num',width:'300px' },
{ field: 'anum4', title: 'Num',width:'400px' },
{ field: 'anum5', title: 'Num',width:'500px' },
{ field: 'anum6', title: 'Num',width:'400px' },
{ field: 'anum7', title: 'Num',width:'200px' },
{ field: 'anum8', title: 'Num',width:'1000px' },
{ field: 'anum9', title: 'Num',width:'300px' },
{ field: 'anum10', title: 'Num',width:'400px'},
{ field: 'anuma0', title: 'Num' },
{ field: 'anuma1', title: 'Num',width:'200px' },
{ field: 'anuma2', title: 'Num',width:'300px' },
{ field: 'anuma3', title: 'Num',width:'300px' },
{ field: 'anuma4', title: 'Num',width:'400px' },
{ field: 'anuma5', title: 'Num',width:'500px' },
{ field: 'anuma6', title: 'Num',width:'400px' },
{ field: 'anuma7', title: 'Num',width:'200px' },
{ field: 'anuma8', title: 'Num',width:'1000px' },
{ field: 'anuma9', title: 'Num',width:'300px' },
{ field: 'anuma10', title: 'Num',width:'400px'},
{ field: 'anuma11', title: 'Num',width:'200px' },
{ field: 'anuma21', title: 'Num',width:'300px' },
{ field: 'anuma31', title: 'Num',width:'300px' },
{ field: 'anuma41', title: 'Num',width:'400px' },
{ field: 'anuma51', title: 'Num',width:'500px' },
{ field: 'anuma61', title: 'Num',width:'400px' },
{ field: 'anuma71', title: 'Num',width:'200px' },
{ field: 'anuma81', title: 'Num',width:'1000px' },
{ field: 'anuma91', title: 'Num',width:'300px' },
{ field: 'anuma101', title: 'Num',width:'400px'},
]
},
{ prop: 'date', title: 'Date' }
],
tableData: []
}
},
created () {
var list = []
for(var index = 0; index < 20; index++){
list.push({
id: index + 10000,
checked: false,
name: 'test' + index,
name: 'test' + index,
name: 'test' + index,
name: 'test' + index,
name: 'test' + index,
name: 'test' + index,
name: 'test' + index,
name: 'test' + index,
name: 'test' + index,
name: 'test' + index,
name: 'test' + index,
role: 'developer',
num: 0,
num0: 1,
num1: 1,
num2: 1,
num3: 1,
num4: 1,
num5: 1,
num6: 1,
num7: 1,
num8: 1,
num9: 1,
num10: 1,
numa: 0,
numa0: 1,
numa1: 1,
numa2: 1,
numa3: 1,
numa4: 1,
numa5: 1,
numa6: 1,
numa7: 1,
numa8: 1,
numa9: 1,
numa10: 1,
numa11: 1,
numa21: 1,
numa31: 1,
numa41: 1,
numa51: 1,
numa61: 1,
numa71: 1,
numa81: 1,
numa91: 1,
numa101: 1,
anum: 0,
anum0: 1,
anum1: 1,
anum2: 1,
anum3: 1,
anum4: 1,
anum5: 1,
anum6: 1,
anum7: 1,
anum8: 1,
anum9: 1,
anum10: 1,
anuma: 0,
anuma0: 1,
anuma1: 1,
anuma2: 1,
anuma3: 1,
anuma4: 1,
anuma5: 1,
anuma6: 1,
anuma7: 1,
anuma8: 1,
anuma9: 1,
anuma10: 1,
anuma11: 1,
anuma21: 1,
anuma31: 1,
anuma41: 1,
anuma51: 1,
anuma61: 1,
anuma71: 1,
anuma81: 1,
anuma91: 1,
anuma101: 1,
date: '2019-05-01',
time: 1556677810888 + index * 500,
region: 'ShenZhen',
address: 'address abc' + index
})
}
this.tableData = list
},
methods:{
footerMethod ({ columns, data }) {
console.log(columns)
return [
columns.map((column, columnIndex) => {
if (columnIndex === 0) {
return 'field名字'
}
return column.property
// if ([ 'num', 'num0', 'num1', 'num2', 'num3', 'num4', 'num5', 'num6', 'num7', 'num8', 'num9', 'num10','numa', 'numa0', 'numa1', 'numa2', 'numa3', 'numa4', 'numa5', 'numa6', 'numa7', 'numa8', 'numa9', 'numa10', 'numa11', 'numa21', 'numa31', 'numa41', 'numa51', 'numa61', 'numa71', 'numa81', 'numa91', 'numa101',].includes(column.property)) {
// return column.property
// }
return null
}),
]
}
}
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<div id="app">
<template>
<div>
<vxe-grid
border
stripe
height="300"
show-footer
:columns="tableColumn"
:footer-method="footerMethod"
:data.sync="tableData"></vxe-grid>
</div>
</template>
</div>
@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/index.css");