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，效果