<template> <a-card :bordered="false"> <a-row> <a-col> <a-switch v-bind="pageSwitchProps" v-model="pageSwitch"/> </a-col> <a-col> <a-table v-bind="tableProps" @change="handleTableChange" style="margin-top: 20px" > </a-table> </a-col> </a-row> </a-card> </template> <script> export default { name: 'TableTotal', data() { return { columns: [ { title: '#', width: '180px', align: 'center', dataIndex: 'rowIndex', customRender: function (text, r, index) { return (text !== '总计') ? (parseInt(index) + 1) : text } }, { title: '姓名', dataIndex: 'name', width: 180, }, { title: '贡献点', dataIndex: 'point', width: 180, }, { title: '等级', dataIndex: 'level', width: 180, }, { title: '更新时间', dataIndex: 'updateTime', width: 180, }, ], /* 分页参数 */ ipagination: { current: 1, pageSize: 10, }, dataSource: [ {id: "1", name: '张三', point: 23, level: 3, updateTime: '2019-8-14'}, {name: '小王', point: 6, level: 1, updateTime: '2019-8-13'}, {name: '李四', point: 53, level: 8, updateTime: '2019-8-12'}, {name: '小红', point: 44, level: 5, updateTime: '2019-8-11'}, {name: '王五', point: 97, level: 10, updateTime: '2019-8-10'}, {name: '小明', point: 33, level: 2, updateTime: '2019-8-10'}, {name: '小张', point: 33, level: 2, updateTime: '2019-8-10'}, {name: '小六', point: 33, level: 2, updateTime: '2019-8-10'}, {name: '小五', point: 33, level: 2, updateTime: '2019-8-10'}, {name: '小赵', point: 33, level: 2, updateTime: '2019-8-10'}, {name: '李华', point: 33, level: 2, updateTime: '2019-8-10'}, {name: '小康', point: 33, level: 2, updateTime: '2019-8-10'}, {name: '小鹿', point: 33, level: 2, updateTime: '2019-8-10'}, ], newArr: [], newDataSource: [], footerDataSource: [], pageSwitch: true } }, computed: { // 数据表格的固定属性 tableProps() { let tableProps = { size: 'middle', rowKey: 'rowIndex', columns: this.columns, scroll: {x: true}, } let renderFooter = this.footerDataSource.length === 0 ? null : () => this.renderTableFooter(tableProps) return { ...tableProps, ref: 'table', class: 'chart-data-list', pagination: this.pageSwitch ? this.ipagination : false, columns: this.columns, dataSource: this.dataSource, footer: renderFooter, } }, pageSwitchProps() { return { checkedChildren: '分页', unCheckedChildren: '分页', style: { position: 'absolute', right: '0px', top: '-10px' } } }, }, mounted() { // this.tableAddTotalRow(this.columns, this.dataSource) /*新增分页合计方法*/ this.newDataSource = this.dataSource this.dataHandling(1, this.ipagination.pageSize) }, watch: { //update-begin---author:wangshuai ---date:20220209 for:[JTC-494]常用示例->表格合计写法改成新的写法------------ 'pageSwitch': function (val) { if (!val) { this.dataHandling('-1', 0) } else { this.dataHandling(1, this.ipagination.pageSize) } }, 'ipagination.current': function (val) { this.dataHandling(val, this.ipagination.pageSize) }, //当合计行变化时,绑定滚动条 'footerDataSource': { async handler(dataSource) { // 当底部合计行有值,并且显示出来时,再同步滚动条 if (dataSource && dataSource.length > 0) { await this.$nextTick() // 同步表与footer滚动 let dom = this.$refs.table.$el.querySelectorAll('.ant-table-body')[0] let footerDom = this.$refs.footerTable.$el.querySelectorAll('.ant-table-body')[0] dom.addEventListener( 'scroll', () => { footerDom.scrollLeft = dom.scrollLeft }, true, ) } }, //update-end---author:wangshuai ---date:20220209 for:[JTC-494]常用示例->表格合计写法改成新的写法------------ } }, methods: { /** 表格增加合计行 */ tableAddTotalRow(columns, dataSource) { let numKey = 'rowIndex' let totalRow = {[numKey]: '合计'} columns.forEach(column => { let {key, dataIndex} = column if (![key, dataIndex].includes(numKey)) { let total = 0 dataSource.forEach(data => { total += /^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseInt(data[dataIndex]) : Number.NaN console.log(data[dataIndex], ':', (/^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseInt(data[dataIndex]) : Number.NaN)) }) if (Number.isNaN(total)) { total = '-' } totalRow[dataIndex] = total } }) dataSource.push(totalRow) }, handleTableChange(pagination, filters, sorter) { this.ipagination = pagination; }, //update-begin---author:wangshuai ---date:20220209 for:[JTC-494]常用示例->表格合计写法改成新的写法------------ /*如果分页走这个方法*/ dataHandling(pageNo, pageSize) { //根据当前页数和每页显示条数分割数组 let arrs = []; //如果pageNo不是-1(不分页),那么需要对数据进行分页计算 if (pageNo != -1) { arrs = this.newDataSource.slice((pageNo - 1) * pageSize, pageNo * pageSize) } else { arrs = this.newDataSource } let newDataSource = []; let newArr = {}; newArr.rowIndex = "总计" let level = 0; let point = 0; //每一项的数值相加 for (let j = 0; j < arrs.length; j++) { level += arrs[j].level; point += arrs[j].point; } newArr.level = level; newArr.point = point; newDataSource.push(newArr); //给foot底部数组赋值 this.footerDataSource = newDataSource; }, // 渲染表格底部合计行 renderTableFooter(tableProps) { let h = this.$createElement return h('a-table', { ref: 'footerTable', props: { ...tableProps, pagination: false, dataSource: this.footerDataSource, showHeader: false, }, }) //update-end---author:wangshuai ---date:20220209 for:[JTC-494]常用示例->表格合计写法改成新的写法------------ } } } </script> <style scoped lang="less"> /deep/ .chart-data-list .ant-table-footer .ant-table-body { overflow: hidden !important; } /deep/ .ant-table-footer { padding: 0; } </style>