html表格输入求和,vue + element-ui的表格(table)组件, 如何实现后期用户输入一列数据, 然后求和刚才一列的和...

问题描述

在表格的input框里面输入数字, 然后总价那一行计算刚才输入的总和

问题出现的环境背景及自己尝试过哪些方法

相关代码

js代码

:summary-method="getSummaries" 是框架自带属性

var Main = {

data() {

return {

tableData6: [{

id: '12987122',

name: '王小虎111',

amount1: '234',

amount2: '3.2',

amount3: 10

}, {

id: '12987123',

name: '王小虎222',

amount1: '165',

amount2: '4.43',

amount3: 12

}, {

id: '12987124',

name: '王小虎333',

amount1: '324',

amount2: '1.9',

amount3: 9

}, {

id: '12987125',

name: '王小虎444',

amount1: '621',

amount2: '2.2',

amount3: 17

}, {

id: '12987126',

name: '王小虎555',

amount1: '539',

amount2: '4.1',

amount3: 15

}]

};

},

created() {

this.tableData6.map((item) => {

item.amount4 = ""

})

console.log('created----this.tableData6', this.tableData6)

},

methods: {

// 失去焦点

aaa(index, number) {

let temp = Object.assign({}, this.tableData6)

this.tableData6[index].amount4 = number

console.log('this.tableData6', this.tableData6)

if (index === (this.tableData6.length - 1)) {

console.log("++++++++")

this.tableData6 = this.tableData6

}

},

getSummaries(param) {

const {

columns,

data

} = param;

console.log('param', param)

//console.log('data', data)

const sums = [];

columns.forEach((column, index) => {

if (index === 0) {

sums[index] = '总价';

return;

}

const values = data.map(item => {

return Number(item[column.property])

});

if (!values.every(value => isNaN(value))) {

sums[index] = values.reduce((prev, curr) => {

const value = Number(curr);

if (!isNaN(value)) {

return prev + curr;

} else {

return prev;

}

}, 0);

sums[index] += ' 元';

} else {

sums[index] = 'N/A';

}

});

return sums;

}

}

};

var Ctor = Vue.extend(Main)

new Ctor().$mount('#app')