參考地址
樣式我用的是打印A4樣式，只要看grid數據和結構就行
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/index.css">
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div style="width:794px;height:1123px;">
<div id="app" class="test" >
<vxe-grid border size="medium" :tree-config="tableTreeConfig" resizable ref="xGrid" :data="tableData" :columns="tableColumn" >
</vxe-grid>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
let mockData = [
{
name: '一班',
level: '',
age: '',
rate: '',
children: [
{ name: 'test7', rate: 9, age: 24, level: 1 },
{ name: 'test6', rate: 14, age: 20, level: 3 },
{
name: '第一組',
level: '',
age: '',
rate: '',
children: [
{ name: 'test85', rate: 13, age: 32, level: 1 },
{ name: 'test37', rate: 9, age: 29, level: 4 },
{ name: 'test93', rate: 22, age: 28, level: 5 },
{ name: 'test90', rate: 55, age: 26, level: 2 }
]
},
{ name: 'test32', rate: 11, age: 21, level: 1 }
]
},
{
name: '二班',
level: '',
age: '',
rate: '',
children: [
{ name: 'test15', rate: 13, age: 32, level: 1 },
{ name: 'test44', rate: 9, age: 29, level: 4 },
{
name: '第一組',
level: '',
age: '',
rate: '',
children: [
{ name: 'test37', rate: 9, age: 29, level: 4 },
{ name: 'test93', rate: 22, age: 28, level: 5 }
]
},
{
name: '第二組',
level: '',
age: '',
rate: '',
children: [
{ name: 'test74', rate: 11, age: 32, level: 5 },
{ name: 'test99', rate: 23, age: 18, level: 4 },
{
name: '第一排',
level: '',
age: '',
rate: '',
children: [
{ name: 'test48', rate: 77, age: 29, level: 4 },
{ name: 'test38', rate: 34, age: 21, level: 2 }
]
},
{ name: 'test16', rate: 22, age: 26, level: 5 }
]
},
{ name: 'test91', rate: 16, age: 27, level: 5 },
{
name: '第三組',
level: '',
age: '',
rate: '',
children: [
{ name: 'test77', rate: 11, age: 35, level: 1 },
{ name: 'test89', rate: 40, age: 18, level: 4 },
{ name: 'test10', rate: 22, age: 20, level: 2 }
]
}
]
},
{
name: '三班',
level: '',
age: '',
rate: '',
children: [
{ name: 'test6', rate: 3, age: 22, level: 2 },
{ name: 'test2', rate: 5, age: 25, level: 3 },
{ name: 'test42', rate: 17, age: 35, level: 4 }
]
}
];
var app = new Vue({
el: '#app',
data: {
tableData: mockData,
tableColumn: [
{ field: 'name', title: '名稱' ,width:200,treeNode:"true"},
{ field: 'level', title: '級別', },
{ field: 'age', title: '年齡', },
{ field: 'rate', title: '分數', width:150 },
],
tableTreeConfig: {
children: 'children',
accordion: false, // 一層只允許展開一個節點
expandAll: true // 默認是否全部展開
},
},
computed: {
},
methods: {
},
}
)
</script>
</body>
<style>
body{text-align:center; }
div{margin:0 auto;overflow:hidde;
display:block;}
.vxe-table.size--medium {
font-size: 15px;
font-weight: 700;
}
</style>
</html>
