vue table 某列求和

可以使用 Vue 的计算属性来实现某列求和。首先，在表格中定义一个列属性，例如：

<el-table-column prop="price" label="价格"></el-table-column>

然后，在 Vue 实例中定义一个计算属性，用于计算该列的总和：

computed: {
total() {
return this.tableData.reduce((sum, item) => sum + item.price, 0);
}
}

其中，tableData 是表格的数据源，reduce 方法用于计算数组的总和。

最后，在模板中使用该计算属性来显示总和：

<el-row>
<el-col :span="12">总和：</el-col>
<el-col :span="12">{{ total }}</el-col>
</el-row>

相关问题

vue table 某列动态求和

可以使用 Vue 的计算属性来实现某列动态求和。首先，在表格的数据源中添加一个新的属性，用于存储该列的值。然后，在计算属性中遍历数据源，将该列的值累加起来并返回即可。以下是示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>成绩</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.score }}</td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td>{{ totalScore }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, score: 80 },
        { name: '李四', age: 20, score: 90 },
        { name: '王五', age: 22, score: 85 }
      ]
    }
  },
  computed: {
    totalScore() {
      let sum = 0
      this.tableData.forEach(item => {
        sum += item.score
      })
      return sum
    }
  }
}
</script>

在上面的代码中，我们在表格数据源中添加了一个名为 `score` 的属性，用于存储成绩。然后，在计算属性 `totalScore` 中遍历数据源，将每个学生的成绩累加起来并返回。最后，在表格的最后一行显示总成绩。

ant design vue table组件表头计算此列数据总和

Ant Design Vue 的 Table 组件提供了 `customRow` 和 `customHeaderRow` 属性，可以自定义每行和表头的渲染。我们可以利用这个特性，在表头最后一列加上一个求和单元格，并在每一行的对应列单元格中填入数据。

具体实现步骤如下：

1. 在表头的最后一列加上一个求和列，代码如下：

<a-table-column title="总计" dataIndex="total" key="total" customHeaderRow={(columns, index) => {
  return {
    on: {},
    props: {
      colSpan: columns.length - 1,
    },
  };
}}>
  <template slot-scope="text">
    {{ text }}
  </template>
</a-table-column>

这里使用了 `customHeaderRow` 属性，将求和列合并到表头的最后一列，并且不设置 `dataIndex` 和 `key` 属性，以避免它被渲染为真实数据的列。

2. 在每一行的对应列单元格中填入数据，并且在最后一列单元格中计算总和，代码如下：

<a-table-column title="数量" dataIndex="quantity" key="quantity" customRow={(record, index) => {
  return {
    on: {},
    props: {},
    children: record.quantity,
    onCell: () => {
      return {
        style: {
          textAlign: 'right',
        },
      };
    },
  };
}} />
<a-table-column title="单价" dataIndex="price" key="price" customRow={(record, index) => {
  return {
    on: {},
    props: {},
    children: record.price,
    onCell: () => {
      return {
        style: {
          textAlign: 'right',
        },
      };
    },
  };
}} />
<a-table-column title="小计" key="subtotal" customRow={(record, index) => {
  const subtotal = record.quantity * record.price;
  if (index === dataSource.length - 1) {
    // 计算总和
    let sum = 0;
    dataSource.forEach((item) => {
      sum += item.quantity * item.price;
    });
    return {
      on: {},
      props: {},
      children: sum.toFixed(2),
      onCell: () => {
        return {
          style: {
            textAlign: 'right',
            fontWeight: 'bold',
          },
        };
      },
    };
  } else {
    return {
      on: {},
      props: {},
      children: subtotal.toFixed(2),
      onCell: () => {
        return {
          style: {
            textAlign: 'right',
          },
        };
      },
    };
  }
}} />

这里使用了 `customRow` 属性，自定义每一行的渲染。在对应列的单元格中填入数据，同时在最后一列单元格中计算总和。

完整的示例代码如下：

<template>
  <a-table :columns="columns" :dataSource="dataSource" bordered />
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '名称',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '数量',
          dataIndex: 'quantity',
          key: 'quantity',
          customRow: (record, index) => {
            return {
              on: {},
              props: {},
              children: record.quantity,
              onCell: () => {
                return {
                  style: {
                    textAlign: 'right',
                  },
                };
              },
            };
          },
        },
        {
          title: '单价',
          dataIndex: 'price',
          key: 'price',
          customRow: (record, index) => {
            return {
              on: {},
              props: {},
              children: record.price,
              onCell: () => {
                return {
                  style: {
                    textAlign: 'right',
                  },
                };
              },
            };
          },
        },
        {
          title: '小计',
          key: 'subtotal',
          customRow: (record, index) => {
            const subtotal = record.quantity * record.price;
            if (index === this.dataSource.length - 1) {
              // 计算总和
              let sum = 0;
              this.dataSource.forEach((item) => {
                sum += item.quantity * item.price;
              });
              return {
                on: {},
                props: {},
                children: sum.toFixed(2),
                onCell: () => {
                  return {
                    style: {
                      textAlign: 'right',
                      fontWeight: 'bold',
                    },
                  };
                },
              };
            } else {
              return {
                on: {},
                props: {},
                children: subtotal.toFixed(2),
                onCell: () => {
                  return {
                    style: {
                      textAlign: 'right',
                    },
                  };
                },
              };
            }
          },
        },
      ],
      dataSource: [
        {
          name: '商品 1',
          quantity: 2,
          price: 10.5,
        },
        {
          name: '商品 2',
          quantity: 3,
          price: 5.2,
        },
        {
          name: '商品 3',
          quantity: 1,
          price: 6.8,
        },
      ],
    };
  },
};
</script>