a-table末尾行添加合计
思路:手动计算出合计值,push到最后数组最后列。
·
思路:手动计算出合计值,push到最后数组最后列。
<a-table
bordered
:rowKey="record=>record.id"
:columns="columns"
:data-source="sumList"
:pagination="pagination"
:scroll="{ y: 'calc(80vh - 530px)', x: true }"
:customHeaderRow="customHeaderRow"
>
</a-table>
data() {
return {
pagination: {
pageNo: 1,
pageSize: 10,
total: 0,
showTotal: val => `总计:${val}条`
},
dataList: [
{ id: 1, theSsjd: '沙洲街道', theJmzzxq: 2},
{ id: 2, theSsjd: '南苑街道', theJmzzxq: 2},
],
columns: [
{ title: '序号', customRender: (_, r, i) => (this.pagination.pageNo - 1) * this.pagination.pageSize + i + 1, width: 50, fixed: 'left' },
{ dataIndex: 'theSsjd', title: '所属街道', width: 80, fixed: 'left' },
{ dataIndex: 'theJmzzxq', title: '居民住宅小区(个)', width: 80, },
]
};
},
created() {
// this.getData()
},
computed: {
sumList: function() {
const sumObject = { id: this.dataList.length + 1, theSsjd: '合计', theJmzzxq: 0 };
this.dataList.forEach(item => {
if(typeof item === "object" && item !== null) {
for (const key in item) {
if(key !== 'id' && key !== 'theSsjd') {
if(sumObject[key]) {
sumObject[key] += item[key]
} else {
sumObject[key] = item[key]
}
}
}
}
})
const list = [...this.dataList, sumObject]
return list
}
},
<style lang="less" scoped>
/deep/tr:last-child td {
background: #fff;
position: sticky;
bottom: 0px;
z-index: 1;
box-shadow: 5px 0 10px #e4e4e4;
}
</style>
更多推荐
所有评论(0)