<template>
<div style='height: 800px;width: 100%;background: #fff;'>
<el-table ref="table" border :data="tableData" :span-method="objectSpanMethod" stripe class="table-class" show-summary :summary-method="getNodeSummaries" highlight-current-row>
<el-table-column type="index" label="序号" width="50"></el-table-column>
<el-table-column prop="name" label="名字" align="center" />
<el-table-column prop="sex" label="性别" width="120" align="center" />
<el-table-column prop="tiZh" label="体重" width="120" align="center" />
<el-table-column prop="num1" label="数学" width="120" align="center" />
<el-table-column prop="num2" label="英语" width="120" align="center" />
<el-table-column prop="num3" label="语文" width="120" align="center" />
</el-table>
</div>
</template>
<script>
// import { ref } from 'vue'
export default {
name: 'aaaa',
components: {},
props: {},
data() {
return {
tableData: [
{
name: '张三',
sex: '男',
tiZh: 120,
num1: 1000,
num2: 2000,
num3: 3000
},{
name: '张四',
sex: '女',
tiZh: 120,
num1: 1000,
num2: 2000,
num3: 3000
},
],
}
},
computed: {},
mounted() {},
methods: {
objectSpanMethod() {
this.$nextTick(x => {
if (this.$refs.table.$el) {
var current = this.$refs.table.$el
.querySelector(".el-table__footer-wrapper")
.querySelector(".el-table__footer");
var cell = current.rows[0].cells;
cell[0].style.display = "none";
cell[1].style.display = "none";
cell[2].style.display = "none";
cell[3].classList.remove('is-left')
cell[3].colSpan = "4";
}
})
},
getNodeSummaries(param) {
const { columns, data } = param;
const sums = [];
let arr = [ 'num1', 'num2', 'num3']
columns.forEach((column, index) => {
if (index === 3) {
sums[index] = "合计";
return;
}
if (arr.some(x => column.property === x)) {
sums[index] = 0;
data.map((item) => {
console.log(item)
let num = item[column.property];
// num = num ? parseFloat(num.replace(/,/gi, "")) : 0;
sums[index] = this.accAdd(sums[index], num);
});
} else {
sums[index] = "";
}
});
return sums;
},
accAdd(arg1, arg2) {
let r1, r2, m;
try {
r1 = arg1.toString().split(".")[1].length;
} catch (e) {
r1 = 0;
}
try {
r2 = arg2.toString().split(".")[1].length;
} catch (e) {
r2 = 0;
}
m = Math.pow(10, Math.max(r1, r2));
return ((arg1 * m + arg2 * m) / m).toFixed(2);
},
}
}
</script>
<style lang='scss' scoped>
.table-class{
width: 50%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
table表格合并行
最新推荐文章于 2024-04-16 15:26:53 发布