vue给table组件添加合计

在 Vue 3 中,你可以使用 v-on:click 事件监听器来处理点击事件,并将数据添加到表格的第一行。假设你正在使用 Element UI 的表格组件,并且你想要在点击事件中添加一个合计行,你可以按照以下方式进行:

html 复制代码
<template>  
  <div>  
    <el-table :data="tableData" show-summary>  
      <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-column :formatter="sumFormatter" label="合计"></el-table-column>  
    </el-table>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      tableData: [  
        { date: '2023-07-18', name: '张三', address: '上海市普陀区金沙江路 1518 弄' },  
        { date: '2023-07-19', name: '李四', address: '上海市普陀区金沙江路 1517 弄' },  
        { date: '2023-07-20', name: '王五', address: '上海市普陀区金沙江路 1519 弄' },  
      ],  
    };  
  },  
  methods: {  
    sumFormatter(row, column, cellValue) {  
      const sum = this.tableData.reduce((sum, row) => sum + row[column.property], 0);  
      return `${sum}`; // 根据需要修改此处的格式化方式,比如添加人民币符号等  
    },  
    addRow() {  
      const newRow = { date: '2023-07-21', name: '赵六', address: '上海市普陀区金沙江路 1520 弄' };  
      this.tableData.unshift(newRow); // 在数据数组的开头添加新行  
    },  
  },  
};  
</script>

在上述代码中,我已经定义了一个 sumFormatter 方法来计算所有行中每一列的合计值,并显示在表格的最后一列。同时,我还定义了一个 addRow 方法,当你点击某个按钮时,它将在表格的第一行添加一个新行。你可以根据你的需要修改这些方法。

相关推荐
慧一居士7 分钟前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea33 分钟前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴38 分钟前
笨方法学python -练习14
java·前端·python
Mintopia1 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖1 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia1 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农1 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
markyankee1011 小时前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
MrSkye1 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤1 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js