知识点:
- 显示或隐藏表头
- 表格列宽拖动
- 表格高度自适应可以设置表格最大高度值
- 页脚追加量两行,一行平均值、一行求和
效果图:
1. index.html中的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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>
<!-- 使用 cdn 引用方式需要注意是否锁定版本,默认指向最新版本 -->
</head>
<body>
<div id="app">
<template>
<div style="padding: 0 50px">
<vxe-toolbar>
<template v-slot:buttons>
<vxe-button @click="showHeader = !showHeader">显示/隐藏表头</vxe-button>
</template>
</vxe-toolbar>
<!--
1. 显示或隐藏表头使用参数:
:show-header="showHeader"
2. 表格列宽拖动使用参数
resizable
3. 表格高度自适应时可以设置最大高度
max-height="450"或max-height="100"
4. 表格末尾加入两行数据一个平均值,一个求和,详见main.js文件中的footerMethod方法
也就是xeutils中的求和求平均值函数的用法
-->
<vxe-table
border
highlight-hover-row
:show-header="showHeader"
resizable
show-overflow
max-height="450"
class="mytable-scrollbar"
show-footer
:footer-method="footerMethod"
:data="tableData"
>
<vxe-table-column type="seq" width="60" title="序号"></vxe-table-column>
<vxe-table-column field="name" title="姓名"></vxe-table-column>
<vxe-table-column field="sex" title="性别"></vxe-table-column>
<vxe-table-column field="age" title="年龄"></vxe-table-column>
<vxe-table-column field="date" title="日期"></vxe-table-column>
<vxe-table-column field="address" title="地址"></vxe-table-column>
</vxe-table>
</div>
</template>
</div>
</body>
<script src="./js/main.js"></script>
<link rel="stylesheet" href="./css/main.css">
</html>
2. main.css中的代码
@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");
.vxe-textarea--inner {
line-height: inherit;
}
3. main.js中的代码
var Main = {
data() {
return {
tableData: [],
showHeader: true
}
},
created() {
var list = [];
for (var index = 0; index < 5; index++) {
list.push({
name: 'test' + index,
role: 'developer',
sex: '男',
age: index + 18,
date: '2019-05-01',
time: 1556677810888 + index * 500,
region: 'ShenZhen',
address: '河北省保定市易县裴山镇南庄村酒厂大渠往西的向阳村居委会' + index
})
}
this.tableData = list
},
methods: {
footerMethod({columns, data}) {
const means = [];
const sums = [];
columns.forEach((column, columnIndex) => {
if (columnIndex === 0) {
means.push('平均');
sums.push('和值');
} else {
let meanCell = null;
let sumCell = null;
switch (column.property) {
case 'age':
case 'rate':
meanCell = parseInt(XEUtils.mean(data, column.property));
sumCell = XEUtils.sum(data, column.property);
break
}
means.push(meanCell);
sums.push(sumCell)
}
});
// 返回一个二维数组的表尾合计
return [means, sums]
}
}
};
var app = new Vue(Main).$mount('#app');