element的el-table自定义最后一行的实现代码
更新时间:2024年03月26日 14:47:37 作者:暴富的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自定义最后一行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
详解vue-cli快速构建vue应用并实现webpack打包
这篇文章主要介绍了详解vue-cli快速构建vue应用并实现webpack打包,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-12-12


最新评论