show-summary | 是否在表尾显示合计行 | Boolean | — | 默认false |
只有show-summary的用例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Morris.js Charts</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="../plugins/elementUI/elementUI.css">
<style>
.green{color:green;}
</style>
</head>
<body class="">
<div id="demo">
<el-table
:data="tableData6"
border
show-summary
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
prop="amount1"
sortable
label="数值 1">
</el-table-column>
<el-table-column
prop="amount2"
sortable
label="数值 2">
</el-table-column>
<el-table-column
prop="amount3"
sortable
label="数值 3">
</el-table-column>
</el-table>
</div>
<script src="../js/vue.js"></script>
<script src="../plugins/elementUI/elementUI.js"></script>
<script>
var demo = new Vue({
el: '#demo',
data: {
tableData6: [{
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: {
}
})
</script>
</body>
</html>
含 summary-method的使用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Morris.js Charts</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="../plugins/elementUI/elementUI.css">
<style>
.green{color:green;}
</style>
</head>
<body class="">
<div id="demo">
<el-table
:data="tableData6"
border
max-height="400"
:summary-method="getSummaries"
show-summary
style="width: 100%; margin-top: 20px">
<el-table-column
prop="id"
label="ID"
width="180" sortable>
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
label="数值 1(元)">
</el-table-column>
<el-table-column
prop="amount3"
label="数值 3(元)">
</el-table-column>
</el-table>
</div>
<script src="../js/vue.js"></script>
<script src="../plugins/elementUI/elementUI.js"></script>
<script>
var demo = new Vue({
el: '#demo',
data: {
tableData6: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount3: 9
}, {
id: '12987125',
name: '王小虎',
amount1: '621',
amount3: 17
}, {
id: '12987126',
name: '王小虎',
amount1: '539',
amount3: 15
}]
},
methods: {
getSummaries(param) {
//param 是固定的对象,里面包含 columns与 data参数的对象 {columns: Array[4], data: Array[5]},包含了表格的所有的列与数据信息
const { columns, data } = param;
console.log(param)
//console.log(data)
const sums = [];
columns.forEach((column, index) => {
//console.log(column)
//console.log(index)
if (index === 0) {
sums[index] = '总价';
return;
}
const values = data.map(item => Number(item[column.property]));
//验证每个value值是否是数字,如果是执行if
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
//const value = Number(curr);
//if (!isNaN(value)) {
return prev + curr;
// } else {
// return prev;
// }
}, 0);
sums[index] += ' 元';
} else {
sums[index] = 'N/A';
}
});
return sums;
}
}
})
</script>
</body>
</html>