element的el-table自定义最后一行的实现代码
作者：暴富的im
最后一行要显示一些其他结果,用的是element ui 自带的数据总计的属性；返回一个数组,会按下标进行展示,这篇文章主要介绍了element的el-table自定义最后一行的实现代码,需要的朋友可以参考下
element的el-table自定义最后一行
场景：
最后一行要显示一些其他结果，用的是element ui 自带的数据总计的属性；返回一个数组，会按下标进行展示。
代码：
<el-table
:summary-method="getSummaries"
show-summary
:data="tableData"
stripe
style="width: 50% ;margin-top: 20px;font-size: 15px;">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
重点在于getSummaries这个自定义的方法，返回一个数组即可以显示
getSummaries(param) {
const { columns } = param
const sums = []
columns.forEach((column, index) => {
switch (index) {
case 0:
sums[index] = '是否通过'
break
case 1:
sums[index] = 'erewrwr'
break
case 2:
sums[index] = 'erewrwr'
break
case 3:
sums[index] = 'erewrwr'
break
}
})
return sums
},element-ui中的el-table底部固定指定行
1，固定一行合计的情况
https://element.eleme.cn/#/zh-CN/component/table
直接使用官方文档上的summary-method
2，固定指定行或者多行
使用样式去固定
例子：(计算列表数据的平均值，最大值，最小值并固定底部)
1，计算数据的值
protected calcData(data: any) {
const sums: any = {};
const max: any = {};
const min: any = {};
const columns = this.$refs["coverTable"]?.columns;
columns.forEach((column: any, index: number) => {
if (index === 0) {
sums[column.property] = "平均值";
max[column.property] = "最大值";
min[column.property] = "最小值";
return;
}
const values = data.map((item: any) => Number(item[column.property]));
if (!values.every((value: any) => isNaN(value))) {
// 总和
sums[column.property] = values.reduce((prev: any, curr: any) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
// 最大值
max[column.property] = values.reduce((prev: any, curr: any) => {
const value = Number(curr);
if (!isNaN(value) && curr > prev) {
return curr;
} else {
return prev;
}
});
// 最小值
min[column.property] = values.reduce((prev: any, curr: any) => {
const value = Number(curr);
if (!isNaN(value) && curr > prev) {
return prev;
} else {
return curr;
}
});
} else {
sums[column.property] = "N/A";
max[column.property] = "N/A";
min[column.property] = "N/A";
}
});
const average: any = {};
for (const i in sums) {
if (!isNaN(sums[i])) {
average[i] = (sums[i] / data.length).toFixed(3);
} else {
average[i] = sums[i];
}
}
if (this.tableData.length > 0) this.tableData.push(average, max, min);
}2，对要固定的三行设置class
// 行固定
tableRowClassName(params: any) {
const { row, rowIndex } = params;
row.index = rowIndex;
// 最后三行固定
if (rowIndex + 1 === this.tableData.length - 2) {
return `tr-fixed fixed-row2`;
} else if (rowIndex + 1 === this.tableData.length - 1) {
return `tr-fixed fixed-row1`;
} else if (rowIndex + 1 === this.tableData.length) {
return `tr-fixed fixed-row`;
} else {
return ``;
}
}3, 样式控制
.el-table {
.tr-fixed{
display: table-row;
position: sticky;
bottom: 0;
width: 100%;
td {
border: 1px solid #f3f5fa;
background: #fff;
}
}
.fixed-row{
bottom: 0;
}
.fixed-row1{
bottom: 0.5rem;
}
.fixed-row2{
bottom: 1rem;
}
}4，效果
到此这篇关于element的el-table自定义最后一行的文章就介绍到这了,更多相关element的el-table自定义最后一行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！