The core uses reduce to perform addition, subtraction, multiplication, and division operations
column operation
<el-popover placement="top-start" title="运算" width="200" trigger="click">
<el-select @change="selectChange" v-model="value" placeholder="请选择" clearable>
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.label">
</el-option>
</el-select>
<el-button size="medium" slot="reference" type="primary" plain>列运算</el-button>
</el-popover>
<p></p>
<el-table v-if="!isUpdate" :data="tableData" :key="reload" max-height="550"
:header-cell-style="{ background: '#f5f5f5' }" style="width: 100%">
<el-table-column v-for="(item, index) in colData" :key="index" :prop="item.title" :label="item.title"
v-if="item.istrue" align="center" width="120" />
</el-table>
<el-table v-if="isUpdate" :data="upDataTable" :key="isUpdate" max-height="550"
:header-cell-style="{ background: '#f5f5f5' }" style="width: 100%">
<el-table-column v-for="(item, index) in colData" :key="index" :prop="item.title" :label="item.title"
v-if="item.istrue" align="center" width="120" />
<el-table-column label="结果" width="120">
<template slot-scope="scope">
<span>{
{
scope.row.result }}</span>
</template>
</el-table-column>
</el-table>
data() {
return {
options1: [{
value: '选项1',
label: 'a+b'
}, {
value: '选项2',
label: 'a-b'
}, {
value: '选项3',
label: 'b-a'
}, {
value: '选项4',
label: 'a*b'
}, {
value: '选项5',
label: 'a/b'
}, {
value: '选项6',
label: 'b/a'
}],
value: '',
isShow: true,
upDataTable: [],
isUpdate: false,
methods: {
checkedColumns(val) {
if (val.length > 2) {
this.$message("最多选两个")
return false
}
selectChange(val) {
console.log(val, "val");
this.isUpdate = false
let arr = this.tableData.map(obj => {
return Object.keys(obj).reduce((acc, key) => {
if (this.checkedColumns.includes(key)) {
acc[key] = obj[key];
}
return acc;
}, {
});
});
if (val === 'a+b') {
this.upDataTable = arr.reduce((acc, obj) => {
obj.result = Object.values(obj).reduce((acc, val) => acc + val, 0).toFixed(3);;
acc.push(obj);
return acc;
}, []);
this.isUpdate = true
console.log(this.upDataTable, "this.upDataTable");
} else if (val === 'a-b') {
this.upDataTable = arr.reduce((acc, obj) => {
obj.result = Object.values(obj).reduce((acc, val, i, arr) => i === 0 ? val : acc - val, 0).toFixed(3);
acc.push(obj);
return acc;
}, []);
this.isUpdate = true
console.log(this.upDataTable, "this.upDataTable");
} else if (val === 'b-a') {
this.upDataTable = arr.reduce((acc, obj) => {
obj.result = Object.values(obj).reduce((acc, val, i, arr) => i === 0 ? val : val - acc, 0).toFixed(3);
acc.push(obj);
return acc;
}, []);
this.isUpdate = true
console.log(this.upDataTable, "this.upDataTable");
} else if (val === 'a*b') {
this.upDataTable = arr.reduce((acc, obj) => {
obj.result = Object.values(obj).reduce((acc, val) => acc * val, 1).toFixed(3);
acc.push(obj);
return acc;
}, []);
this.isUpdate = true
console.log(this.upDataTable, "this.upDataTable");
} else if (val === 'a/b') {
this.upDataTable = arr.reduce((acc, obj) => {
obj.result = Object.values(obj).reduce((acc, val) => acc / val, 1)
acc.push(obj);
return acc;
}, []);
this.isUpdate = true
console.log(this.upDataTable, "this.upDataTable");
} else if (val === 'b/a') {
this.upDataTable = arr.reduce((acc, obj) => {
obj.result = Object.values(obj).reduce((acc, val) => val / acc, 1)
acc.push(obj);
return acc;
}, []);
this.isUpdate = true
console.log(this.upDataTable, "this.upDataTable");
} else {
this.isUpdate = false
this.reload =true
this.upDataTable = []
}
},}