el-table整列加减乘除运算

核心用reduce进行加减乘除运算

列运算

<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 = []
      }
    },}