elementui中table的合计功能、以及合计行合并

最新推荐文章于 2024-07-09 09:14:10 发布

强壮的糙汉子

最新推荐文章于 2024-07-09 09:14:10 发布

阅读量6.3k

点赞数 2

分类专栏： vue项目文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/m0_60622481/article/details/125632573

版权

本文介绍如何在ElementUI的Table组件中实现自定义的合计功能，特别是如何让合计行占据两列。通过设置`show-summary`属性并结合`watch`监听数据变化，即时更新合计内容。关键点在于使用响应式的`ref`绑定表格ID，以实现对表格的动态操作。

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

大家看合计的这个位置占了两个格子

正常在table中加入了 show-summary这个属性

他是这个样子的，只占一个格子，但是由于项目需求，必须占两个格子

<template>
  <div style="min-width: 1400px">
    <!-- 题头 -->

    <div
      style="
        height: 65px;
        background-color: rgb(227, 227, 227);

        line-height: 65px;
      "
    >
      <h1>2021年6月质量考核与奖励信息查看</h1>
    </div>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      show-summary
      style="width: 100%"
      :align="align"
      ref="table"
      id="table"
    >
      <!-- 序号 -->

      <el-table-column type="index" label="序号" width="100px" :align="align">
      </el-table-column>
      <el-table-column label="单位" prop="unit" min-width="13%" :align="align">
      </el-table-column>