Vue中的vxe-table教程5-列寬拖動、高度自適應、頁尾追加聚合統計行
阿新 • • 發佈：2021-01-13
技術標籤：vxe-table
知識點：
- 顯示或隱藏表頭
- 表格列寬拖動
- 表格高度自適應可以設定表格最大高度值
- 頁尾追加量兩行，一行平均值、一行求和
效果圖：
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');