vue2实现在el-table里修改数据，插入输入框，并且根据输入数据，影响该行其他关联数据

   <div class="content-all">
            <div class="content-tit">填写内容</div>
            <div class="content-text">
              <el-radio v-model="radio" label="1">计划负荷</el-radio>
              <el-radio v-model="radio" label="2">申报量</el-radio>
              <el-button type="primary" @click="modification()"
                >批量修改</el-button
              >
              <el-table
                :data="tableDataFill"
                height="290"
                style="width: 99%; margin-top: 20px"
              >
                <el-table-column
                  prop="runDate"
                  label="响应日"
                  width="110"
                ></el-table-column>
                <el-table-column
                  prop="period"
                  label="响应时段"
                ></el-table-column>
                <el-table-column prop="tag" label="需求类型">
                  <template slot-scope="scope">
                    <el-tag
                      :type="
                        scope.row.demandFlag === '1' ? 'primary' : 'success'
                      "
                      disable-transitions
                    >
                      {{ scope.row.demandFlag === "1" ? "削峰" : "填谷" }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="baseLine"
                  label="基线负荷（MW）"
                ></el-table-column>
                <el-table-column
                  v-if="radio === '2'"
                  prop="planeLine"
                  label="计划负荷（MW）"
                ></el-table-column>

                <el-table-column label="计划负荷（MW）" v-if="radio === '1'">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.planeLine"
                      placeholder="输入计划负荷"
                      type="number"
                      @input="updateDemandResp(scope.row)"
                      oninput="if(value<0)value=0"
                    ></el-input>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="typicalLine"
                  label="典型负荷（MW）"
                ></el-table-column>
                <el-table-column
                  prop="tradeCount"
                  label="历史交易量（MW）"
                ></el-table-column>

                <el-table-column
                  prop="demandResp"
                  label="申报量（MW）"
                  v-if="radio === '1'"
                ></el-table-column>
                <el-table-column
                  v-if="radio === '2'"
                  prop="demandResp"
                  label="申报量（MW）"
                >
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.demandResp"
                      placeholder="输入申报量"
                      @input="updatePlaneLine(scope.row)"
                    ></el-input>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

js块

 methods: {
    updateDemandResp(row) {
      const baseLine = +row.baseLine || 0;
      const tradeCount = +row.tradeCount || 0;
      const plannedLoad = +row.planeLine || 0;

      //  申报量
      row.demandResp = plannedLoad - baseLine - tradeCount;
      console.log("111", row.demandResp);
      if (row.demandFlag === "1" && row.demandResp > 0) {
        row.demandResp = 0;
      } else if (row.demandFlag === "1" && row.demandResp < 0) {
        row.demandResp = row.demandResp.toFixed(2);
      } else if (row.demandFlag === "-1" && row.demandResp > 0) {
        row.demandResp = +row.demandResp.toFixed(2);
      } else if (row.demandFlag === "-1" && row.demandResp < 0) {
        row.demandResp = 0;
      }
      this.updateTableDataFill(row);
    },
    updatePlaneLine(row) {
      const baseLine = +row.baseLine || 0;
      const tradeCount = +row.tradeCount || 0;
      const declaredAmount = +row.demandResp || 0;

      //  计划负荷
      row.planeLine = baseLine + tradeCount + declaredAmount;
      if (row.planeLine < 0) {
        row.planeLine = 0;
      }

      this.updateTableDataFill(row);
    },
    updateTableDataFill(row) {
      const index = this.tableDataFill.findIndex(
        (item) => item.runDate === row.runDate && item.period === row.period
      );
      if (index !== -1) {
        this.$set(this.tableDataFill, index, {
          ...this.tableDataFill[index],
          ...row,
        });
      }
    },

比如，实现申报量 根据填写的计划负荷计算，数值=计划负荷-基线负荷-历史交易量，并且校验填谷申报量≥0，削峰申报量≤0，计划负荷根据填写的申报量计算，数值=基线负荷+历史交易量+申报量，并且校验计划负荷≥0

输入为来自输入字段的字符串保留。
无论何时进行计算，都会使用parseFloat（）对值进行转换。这有效地处理任何非数字输入，确保只对有效数字进行计算。无效输入将默认为0。
处理非数字字符串：

parseFloat（）函数的作用是将字符串转换为浮点数。如果解析失败（例如，输入为空或不是数字），我们将通过返回到0来优雅地处理它。
动态更新:

updateDemandResp（）和updatePlaneLine（）中的逻辑保持不变，确保在用户输入后立即进行重新计算。
空字符串初始化：

tableDataFill属性planeLine和demandasp被初始化为空字符串，允许用户输入初始处理为字符串的值。
 

原文地址：https://blog.csdn.net/freedms/article/details/144429873

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！