<template>
	<div id="table">
		<el-table :data="tableData" border style="width: 100%" >
			<el-table-column prop="id" label="ID" width="180">
			</el-table-column>
			<el-table-column prop="name" label="姓名">
			</el-table-column>
			<el-table-column label="数值" align="center">
				<el-table-column prop="amount1" label="数值 1">
				</el-table-column>
				<el-table-column prop="amount2" label="数值 2">
				</el-table-column>
				<el-table-column prop="amount3" label="数值 3">
				</el-table-column>
			</el-table-column>

		</el-table>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				tableData: [{
					id: '12987122',
					name: '王小虎',
					amount1: '234',
					amount2: '3.2',
					amount3: 10
				}, {
					id: '12987123',
					name: '王小虎',
					amount1: '165',
					amount2: '4.43',
					amount3: 12
				}, {
					id: '12987124',
					name: '王小虎',
					amount1: '324',
					amount2: '1.9',
					amount3: 9
				}, {
					id: '12987125',
					name: '王小虎',
					amount1: '621',
					amount2: '2.2',
					amount3: 17
				}, {
					id: '12987126',
					name: '王小虎',
					amount1: '539',
					amount2: '4.1',
					amount3: 15
				}]
			}
		},
		methods: {
			addData() {
				let obj = {
					id: "总计",
					name: null,
					amount1: null,
					amount2: null,
					amount3: null
				};
				this.tableData.unshift(obj);
				
				this.tableData[0].amount1 = this.sum(this.tableData, "amount1");
				this.tableData[0].amount2 = this.sum(this.tableData, "amount2");
				this.tableData[0].amount3 = this.sum(this.tableData, "amount3");
				console.log(this.tableData[0]);
			},
			//计算当前列的数值 data——表格数据，columnName——列名
			//sum和sum2效果相同
			sum(data, columnName) {
				return data.map(row => Number(row[columnName])).reduce((val, sum) => (val + sum))
			},
			sum2(data, columnName) {
				return data.map(row => Number(eval("row." + columnName))).reduce((acc, cur) => (cur + acc), 0);
			}
		},
		created() {
			this.addData();
		},
		mounted() {

		}
	}
</script>

效果

在日常的学习或开发中，关于后台管理这一块的都会使用到layui.table数据表格，只要用到layui.table数据表格一般就会用到数据表格合计行。

在layui官方文档数据表格的这一栏中，有“totalRow”这一属性，是否开启合计行区域，默认是不开启的。注意:这属性是layui2.4.0之后新增的，版本不够的无法使用该属性的。这是table表格的属性。

接下来就是cols表头的属性，表头的参数同样也有“totalRow”这一属性，是否开启该列的合计功能，默认也是不开启的，默认值为false。另外还有一个“totalRowText”属性，是用于显示自定义的合计文本。

代码如下：

关键代码如下图所示：

1.首先需要在table中添加totalRow参数并将其设为true开启合计行区域;
2.之后在第一列中添加totalRowText参数是你需要显示的合计文本;
3.最后在需要合计数据的表头中添加totalRow参数为true开启该列的自动合计功能;

效果图如下：

1.修改前的表格

2.修改后的表格

3.修改要求

合并前两列为"总计”，后面几列是各列数据之和

4.实现路径

（1）ajax接口里，在for循环外面声明各列合计字段；for循环里面，循环加法，得到各列合计

（2）跳出for循环，在表格html 最后一行再加一行

colspan=2,表示该单元格横跨两列

5.源码

function getData(destDate) {
    doAjax(
        // "https://www.fastmock.site/mock/86f9a3150cfa315ea5fb95ddc2c297a8/data/datac/dcViewSorting/getCurMonSortingInfoByDate",
        "POST", {
            destDate: destDate
        },
        function(data) {
            //末端增加一行合计 声明字段
            let planQtyCount = 0;
            let planWeightCount = 0;
            let planWeightDCount = 0;
            let feedQtyCount = 0;
            let feedWeightCount = 0;
            let feedWeightDCount = 0;

            data.forEach((item, index) => {
                let html = '';
                html += '<tr>  <th>' + item.custName + '</th>';
                html += '<th style="width: 250px">' + item.materialName + '</th>'
                html += '<th>' + item.planQty + '</th>'
                html += '<th>' + item.planWeight + '</th>'
                html += '<th>' + item.planWeightD + '</th>'
                html += '<th>' + item.feedQty + '</th>'
                html += '<th>' + item.feedWeight + '</th>'
                html += '<th>' + item.feedWeightD + '</th></tr>'
                $('#stockInfo').append(html);

                //末端增加一行合计 字段数据
                planQtyCount += item.planQty
                planWeightCount += item.planWeight
                planWeightDCount += item.planWeightD
                feedQtyCount += item.feedQty
                feedWeightCount += item.feedWeight
                feedWeightDCount += item.feedWeightD

            });

            //末端增加一行合计 最后一行的样式
            let html = '';
            html += '<th style="width: 250px" colspan="2">' + '总计' + '</th>'
            html += '<th>' + planQtyCount + '</th>'
            html += '<th>' + planWeightCount + '</th>'
            html += '<th>' + planWeightDCount + '</th>'
            html += '<th>' + feedQtyCount + '</th>'
            html += '<th>' + feedWeightCount + '</th>'
            html += '<th>' + feedWeightDCount + '</th></tr>'
            $('#stockInfo').append(html);
        }
    );
}