Ant Design Vue 的
Table 组件提供了 `customRow` 和 `customHeaderRow` 属性，可以自定义每行和
表头的渲染。我们可以利用这个特性，在
表头最后一列加上一个求和单元格，并在每一行的对应列单元格中填入
数据。
具体实现步骤如下：
1. 在
表头的最后一列加上一个求和列，代码如下：
```html
<a-
table-column title="总计" dataIndex="total" key="total" customHeaderRow={(columns, index) => {
return {
on: {},
props: {
colSpan: columns.length - 1,
},
};
}}>
<template slot-scope="text">
{{ text }}
</template>
</a-
table-column>
```
这里使用了 `customHeaderRow` 属性，将求和列合并到
表头的最后一列，并且不设置 `dataIndex` 和 `key` 属性，以避免它被渲染为真实
数据的列。
2. 在每一行的对应列单元格中填入
数据，并且在最后一列单元格中计算总和，代码如下：
```html
<a-
table-column title="数量" dataIndex="qu
antity" key="qu
antity" customRow={(record, index) => {
return {
on: {},
props: {},
children: record.qu
antity,
onCell: () => {
return {
style: {
textAlign: 'right',
},
};
},
};
}} />
<a-
table-column title="单价" dataIndex="price" key="price" customRow={(record, index) => {
return {
on: {},
props: {},
children: record.price,
onCell: () => {
return {
style: {
textAlign: 'right',
},
};
},
};
}} />
<a-
table-column title="小计" key="subtotal" customRow={(record, index) => {
const subtotal = record.qu
antity * record.price;
if (index === dataSource.length - 1) {
// 计算总和
let sum = 0;
dataSource.forEach((item) => {
sum += item.qu
antity * item.price;
});
return {
on: {},
props: {},
children: sum.toFixed(2),
onCell: () => {
return {
style: {
textAlign: 'right',
fontWeight: 'bold',
},
};
},
};
} else {
return {
on: {},
props: {},
children: subtotal.toFixed(2),
onCell: () => {
return {
style: {
textAlign: 'right',
},
};
},
};
}
}} />
```
这里使用了 `customRow` 属性，自定义每一行的渲染。在对应列的单元格中填入
数据，同
时在最后一列单元格中计算总和。
完整的示例代码如下：
```html
<template>
<a-
table :columns="columns" :dataSource="dataSource" bordered />
</template>
<script>
export default {
data() {
return {
columns: [
{
title: '名称',
dataIndex: 'name',
key: 'name',
},
{
title: '数量',
dataIndex: 'qu
antity',
key: 'qu
antity',
customRow: (record, index) => {
return {
on: {},
props: {},
children: record.qu
antity,
onCell: () => {
return {
style: {
textAlign: 'right',
},
};
},
};
},
},
{
title: '单价',
dataIndex: 'price',
key: 'price',
customRow: (record, index) => {
return {
on: {},
props: {},
children: record.price,
onCell: () => {
return {
style: {
textAlign: 'right',
},
};
},
};
},
},
{
title: '小计',
key: 'subtotal',
customRow: (record, index) => {
const subtotal = record.qu
antity * record.price;
if (index === this.dataSource.length - 1) {
// 计算总和
let sum = 0;
this.dataSource.forEach((item) => {
sum += item.qu
antity * item.price;
});
return {
on: {},
props: {},
children: sum.toFixed(2),
onCell: () => {
return {
style: {
textAlign: 'right',
fontWeight: 'bold',
},
};
},
};
} else {
return {
on: {},
props: {},
children: subtotal.toFixed(2),
onCell: () => {
return {
style: {
textAlign: 'right',
},
};
},
};
}
},
},
],
dataSource: [
{
name: '商品 1',
qu
antity: 2,
price: 10.5,
},
{
name: '商品 2',
qu
antity: 3,
price: 5.2,
},
{
name: '商品 3',
qu
antity: 1,
price: 6.8,
},
],
};
},
};
</script>
```
我的暂无数据为什么被挤下去了？？
最后我苦思冥想，终于找出了应对它的方法：
汗流浃背了吧老弟😎😎😎，是不是根本看不出来！！
4747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
