elementui中table表格的横向（行）求和

最新推荐文章于 2024-07-18 18:15:39 发布

强壮的糙汉子

最新推荐文章于 2024-07-18 18:15:39 发布

阅读量4.3k

点赞数 2

分类专栏： vue项目文章标签： vue

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

版权

本文介绍如何在ElementUI的表格组件中实现横向（行）数据的求和功能。通过获取当前行所有数据并将其转换为number类型相加，达到考核小计的计算效果。

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

我们要的数据是这样的，考核小计等于考核中数据相加，这就是横向数据相加

在elementui中提供了，一个

 <template slot-scope="scope">
          {
  { scope.row.quality_specialtytwo }}
        </template>

使用这个可以获取到当前行的所有数据

代码

  <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>

      <el-table-column label="考核" min-width="41%" :align="align">
        <el-table-column
          prop="zero_defect"
          label="零缺陷交车"
          min-width="10%"
          :align="align"
        >
          <template