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 watch immediate方法用法详解

    vue watch immediate方法用法详解

    这篇文章主要介绍了vue watch immediate方法用法详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • 基于Vue.js实现数字拼图游戏

    基于Vue.js实现数字拼图游戏

    为了进一步让大家了解Vue.js的神奇魅力,了解Vue.js的一种以数据为驱动的理念,本文主要利用Vue实现了一个数字拼图游戏,其原理并不是很复杂,下面跟着小编一起来学习学习。
    2016-08-08
  • 前端vue3项目使用汉字转拼音几种解决方案

    前端vue3项目使用汉字转拼音几种解决方案

    这篇文章主要介绍了前端vue3项目使用汉字转拼音几种解决方案,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2025-06-06
  • vue实现自定义多选与单选的答题功能

    vue实现自定义多选与单选的答题功能

    这篇文章主要介绍了使用vue实现自定义多选与单选的答题功能,vue组件中在表单方面提供了一个v-model指令,非常好用,具体实现过程大家跟随脚本之家小编一起看看吧
    2018-07-07
  • vue按需加载实例详解

    vue按需加载实例详解

    在本篇文章里小编给大家整理的是关于vue按需加载实例的相关知识点内容,有需要的朋友们可以学习参考下。
    2019-09-09
  • Vue项目之ES6装饰器在项目实战中的应用

    Vue项目之ES6装饰器在项目实战中的应用

    作为一个曾经的Java coder,当第一次看到js里面的装饰器Decorator,就马上想到了Java中的注解,当然在实际原理和功能上面,Java的注解和js的装饰器还是有很大差别的,这篇文章主要给大家介绍了关于Vue项目之ES6装饰器在项目实战中应用的相关资料,需要的朋友可以参考下
    2022-06-06
  • vue3子组件上绑定(v-model="xx")父组件传过来的值后报错解决

    vue3子组件上绑定(v-model="xx")父组件传过来的值后报错解决

    这篇文章主要给大家介绍了关于vue3子组件上绑定(v-model="xx")父组件传过来的值后报错解决办法,文中通过示例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下
    2023-07-07
  • 详解vue3 响应式的实现原理

    详解vue3 响应式的实现原理

    Vue.js 3.0 为了解决 Object.defineProperty 的这些缺陷,使用 Proxy API 重写了响应式部分,并独立维护和发布整个 reactivity 库,这篇文章主要介绍了vue3 响应式的实现原理,需要的朋友可以参考下
    2022-06-06
  • vue2之jessibuca视频插件使用教程详细讲解

    vue2之jessibuca视频插件使用教程详细讲解

    Jessibuca进行直播流播放,为用户带来便捷、高效的视频观看体验,下面这篇文章主要给大家介绍了关于vue2之jessibuca视频插件使用的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • 关于在vscode使用webpack指令显示

    关于在vscode使用webpack指令显示"因为在此系统中禁止运行脚本"问题(完美解决)

    这篇文章主要介绍了解决在vscode使用webpack指令显示"因为在此系统中禁止运行脚本"问题,本文给大家分享完美解决方法,需要的朋友可以参考下
    2021-07-07

最新评论