231 lines
7.3 KiB
Java
231 lines
7.3 KiB
Java
<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> |