欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

自定义元素 el-table 的最后一行

最编程 2024-07-05 13:40:28
...
场景:

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

        },

推荐阅读