elementUI中表格table的合计行重写，添加标签元素

汉武大帝·

已于 2023-06-15 10:20:55 修改

阅读量663

点赞数 2

文章标签： elementui 前端 javascript

于 2023-06-15 10:20:13 首次发布

本文链接：https://blog.csdn.net/yinge0508/article/details/131221699

版权

文章介绍了在Vue.js中使用el-table组件时，如何通过设置show-summary为true来显示合计行，并利用summary-method属性定义自定义的计算方法getSummaries，此方法可以用于处理列的合计逻辑。示例中展示了如何在合计行中添加特定内容和tooltip提示。

摘要由CSDN通过智能技术生成

先看效果：

--------------------------------------------------------------------------------------------------------------------------------

Table 属性中，show-summary=true 时，显示合计行，

summary-method 自定义的合计计算方法， Function({ columns, data })

<el-table
    :data="tableData"
    border
    height="200"
    :summary-method="getSummaries"
    show-summary
    style="width: 100%; margin-top: 20px">
</el-table>

:summary-method="getSummaries"


    getSummaries({ columns }) {
			let str = "我是合计行某个单元格的文字"
      columns.forEach((column, index) => {
        if (column.property == "num" || column.property == "refundStuNum") {
          columns[index] = 
            <div>
						// 需要设置变量的用单花括号设置
              <span>{str}</span> 
              <el-tooltip
                class="item"
                effect="light"
                content="我是显示内容"
                placement="top"
              >
                <i class="el-icon-warning-outline" style="margin-left:5px;"></i>
              </el-tooltip>
            </div>
        }
      });
      return columns;
    },