vue antdesign table组件添加尾部合计行
vue + antdesigntable组件添加尾部合计行
·
-
问题:产品设计是表格尾部有合计行,前端自行计算值,我用的是vue+antdesign3.x版本,组件不自带合计功能,上网搜了很多方法,大部分是给表格添加动态footer,但是在我的项目里没实现出来,所以想了其他办法
-
解决思路:用一个div当做尾部合计行,在接口请求之后计算每一列的值,这样也会避免翻页时候出现的一系列问题
-
效果图
-
实现代码:
//html
<a-table
ref='TableInfo'
:loading='loading'
:columns='columns'
:dataSource='dataSource'
:pagination='pagination'
:row-selection='{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }'
:scroll='{x:1200,y:540}'
:rowKey="(record,index)=>{return index}"
bordered
@change='handleTableChange'>
<template slot='operation' slot-scope='text,record'>
<a @click='viewDetailClick(record)'>查看</a>
</template>
</a-table>
//尾部合计行,我要计算9列的值,所以定义了9个变量(如果有更好的方法请分享)
<div class='subtotal'>
<div class='left'>合计</div>
<div class='number'>{{ total1.toFixed(2) }}</div>
<div class='number'>{{ total2.toFixed(2) }}</div>
<div class='number'>{{ total3.toFixed(2) }}</div>
<div class='number'>{{ total4.toFixed(2) }}</div>
<div class='number'>{{ total5.toFixed(2) }}</div>
<div class='number'>{{ total6.toFixed(2) }}</div>
<div class='number'>{{ total7.toFixed(2) }}</div>
<div class='number'>{{ total8.toFixed(2) }}</div>
<div class='number'>{{ total9.toFixed(2) }}</div>
<div class='number'>{{ }}</div> // 这个是为了占位,因为我的操作列固定在了右侧,避免滚动条滚不到最后一列,保持合计行的列数和表格列数一样
</div>
// js
watch: {
// 监听滚动条(把表格的滚动条隐藏了,只显示一条滚动条,监听滚动条滚动的时候,表格和尾部可以一起滑动)
dataSource() {
const dom = this.$refs.TableInfo.$el.getElementsByClassName('ant-table-body')[0];
const footerDom = document.getElementsByClassName('subtotal')[0];
footerDom.addEventListener(
'scroll',
() => {
dom.scrollLeft = footerDom.scrollLeft;
},
true
)
}
},
methods: {
// 请求接口成功后,循环,计算列的和
}
// css
<style lang='less' scoped>
.subtotal {
height: 50px;
position: absolute;
bottom: 90px;
width: 97%;
border: 1px solid #e8e8e8;
background: #F4F4F4;
display: flex;
align-items: center;
font-weight: 900;
overflow-x: scroll;
overflow-y: hidden;
.left {
flex: none; /* div显示滚动条的重点 */
width: 510px;
}
.number {
flex: none;
color: #666666;
height: 100%;
width: 150px;
display: flex;
align-items: center;
padding-left: 15px;
}
}
//隐藏a-table组件的滚动条
/deep/.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
overflow: hidden !important;
}
</style>
更多推荐
已为社区贡献6条内容
所有评论(0)