element的el-table自定义最后一行

最新推荐文章于 2024-05-13 10:36:54 发布

暴富的im

最新推荐文章于 2024-05-13 10:36:54 发布

阅读量817

点赞数 7

分类专栏：前端文章标签： vue.js 前端 javascript elementui 前端框架

本文链接：https://blog.csdn.net/qq_59626859/article/details/136946840

版权

前端专栏收录该内容

68 篇文章 0 订阅

订阅专栏

场景：

最后一行要显示一些其他结果，用的是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

        },