Element-ui 增加行增加列，并对行和列求和&&平均值。_element ui最后增加平均值及合计数据由后端返回-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44734152/article/details/107169676

本文介绍如何使用Element-ui实现表格数据的动态增加行和列，同时对行和列进行求和及平均值计算。通过Vue.js和Element-ui的结合，实现了对表格数据的有效管理和展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element-ui 增加行增加列，并对行和列求和&&平均值。

静态方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta two="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-table
        :show-summary="showSum"
        :data="tableData"
        style="width: 100%"
        ref="row"
        >
        <el-table-column
         v-for="(item,index) in data" :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          >
          <template slot-scope="scope">
              <div>
                  <span>{{scope.row[item.prop] ? scope.row[item.prop] : '-' }}</span>
              </div>
          </template>
        </el-table-column>
        </el-table>
        <el-checkbox-group v-model="checkList">
            <el-checkbox label="对行求和"></el-checkbox>
            <el-checkbox label="对行求平均值"></el-checkbox>
            <el-checkbox label="对列求和"></el-checkbox>
            <el-checkbox label="对列求平均值"></el-checkbox>
        </el-checkbox-group>
        <el-button @click="add" type="success">增加</el-button>
    </div>
</body>
<script>
    new Vue({
      el:'#app',
      data() {
        return {
        showSum: false,
        getSumFlag1:true,
        getSumFlag2: true,
        getSumFlag3: true,
        getSumFlag4: true,
        checkList:[],
        tableData: [{
            information:'一',
            one: 100,
            two: 11,
            three: 100
            }, {
            information:'二',
            one: 200.19,
            two: 22,
            three: 200.00
            }, {
            information:'三',
            one: 300.56,
            two: 33,
            three: 300.00
            }, {
            information:'四',
            one: 400.9,
            two: 44,
            three: 400.00
        }],
        data:[
        {label: "",prop:"information"},
        {label: "一月",prop:"one"},
        {label: "二月",prop:"two"},
        {label: "三月",prop:"three"}
        ],
      };
    },
    methods: {
        add() {
            ones = this.tableData.map(item => item.one)
            twos = this.tableData.map(item => item.two)
            three = this.tableData.map(item => item.three)
            sums = [...ones,...twos,...three] // 数组拼接
            averages = this.tableData.map(item => item.average)
            this.checkList.forEach(item =>{
                if (item === "对行求和") {
                    this.data.push({label:"和",prop:"sum"})// 增加一行
                    this.tableData.forEach((item,index) => {
                        item.sum = this.sumRow(index)
                    })
                }
                if (item === '对列求和'){
                    this.tableData.push({
                        information: '和',
                        one: (this.sumColum(ones)).toFixed(2),
                        two: (this.sumColum(twos)).toFixed(2),
                        three: (this.sumColum(three)).toFixed(2),
                    })
                }
                if (item === '对行求平均值') {
                    this.data.push({label:"平均值",prop:"average"})
                    this.tableData.forEach((item,index) => {
                        item.average = (this.sumRow(index)/4).toFixed(2)
                    })
                }
                if (item === '对列求平均值') {
                    this.tableData.push({
                        information: '平均值',
                        one: (this.sumColum(ones)/4).toFixed(2),
                        two: (this.sumColum(twos)/4).toFixed(2),
                        three: (this.sumColum(three)/4).toFixed(2),
                    })
                }
            })
        },
        // 对列数据处理
        sumColum(arr){
            let s = 0
            arr.forEach(val =>{
                s += val
            })
            return  s
        },
        // 对行数据处理
        sumRow(index) {
            let data = 0
            for (let key in this.tableData[index]) {
            // 排除第一列和已添加的总数数据和平均数的数据
                if (key !== 'information' && key !== 'sum' && key !== 'average'){
                    data += this.tableData[index][key]
                }
                
            }
            return data
        }
    }
})
</script>
</html>

若表格数据为后台返回

// 对行求和
// tableHeader:表头数据；tableData:表格数据
this.tableHeader.push({ label:'和', 'sum' })
this.tableData.forEach((item, index) => {
	item.sum = this.sumRow(index).toFixed(2)
})

// 对列求和
// keyList = []:表头数据的key; statistData = [{}]: 不包含第一列的表格数据
const column = {}
keyList.map((ele, index) => {
	if(ele !== 'information') {
	// 将其转换为 'key'：'value' 例 one:'100'
		column[ele] = this.sumColumn(this.statistData.map(item => item[ele])).toFixed(2)
	} else {
		column[ele] = '和'
	}
})
this.tableData.push(column)