vue中实现element-ui 表格的单元格编辑功能和单元格之间的计算

<el-table
      :data="list"
      max-height="700"
      border
      style="width: 100%"
      @cell-click="tabClick"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="k01" label="年柜ID" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '年柜ID'">
            <el-input v-model="scope.row.k01" maxlength="300" size="mini" @blur="inputBlur(scope)" />
          </span>
          <span v-else>{{ scope.row.k01 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="k02" label="排数" width="110">
        <template slot-scope="scope">
          <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '排数'">
            <el-input v-model="scope.row.k02" maxlength="300" size="mini" @blur="inputBlur(scope)" />
          </span>
          <span v-else>{{ scope.row.k02 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="k03" label="例数" width="110">
        <template slot-scope="scope">
          <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '例数'">
            <el-input v-model="scope.row.k03" maxlength="300" size="mini" @blur="inputBlur(scope)" />
          </span>
          <span v-else>{{ scope.row.k03 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="k04" label="码层" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '码层'">
            <el-input v-model="scope.row.k04" maxlength="300" size="mini" @blur="inputBlur(scope)" />
          </span>
          <span v-else>{{ scope.row.k04 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="k05" label="托盘" width="60">
        <template slot-scope="scope">
          <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '托盘'">
            <el-input v-model="scope.row.k05" maxlength="300" size="mini" @blur="inputBlur(scope)" />
          </span>
          <span v-else>{{ scope.row.k05 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="k06" label="方向" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '方向'">
            <el-input v-model="scope.row.k06" maxlength="300" size="mini" @blur="inputBlur(scope)" />
          </span>
          <span v-else>{{ scope.row.k06 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="k07" label="物料名称" width="80"></el-table-column>
      <el-table-column prop="k08" label="托数" width="80"></el-table-column>
      <el-table-column prop="k09" label="件数" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '件数'">
            <el-input v-model="scope.row.k09" maxlength="300" size="mini" @blur="inputBlur(scope)" />
          </span>
          <span v-else>{{ scope.row.k09 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="k10" label="占柜宽" width="80"></el-table-column>
      <el-table-column prop="k11" label="占柜长" width="80"></el-table-column>
      <el-table-column prop="k12" label="例占宽" width="120"></el-table-column>
      <el-table-column prop="k13" label="排宽" width="80"></el-table-column>
      <el-table-column prop="k14" label="柜余宽" width="80"></el-table-column>
      <el-table-column prop="k15" label="01长" width="80"></el-table-column>
      <el-table-column prop="k16" label="02长" width="60"></el-table-column>
      <el-table-column prop="k17" label="03长" width="80"></el-table-column>
      <el-table-column prop="k18" label="排最宽" width="80"></el-table-column>
      <el-table-column prop="k19" label="托盘代码" width="80"></el-table-column>
      <el-table-column prop="k20" label="货号ID" width="80"></el-table-column>
      <el-table-column prop="k21" label="目的港" width="80"></el-table-column>
      <el-table-column prop="k22" label="经办人" width="80"></el-table-column>
      <el-table-column prop="k23" label="经办日期" width="120"></el-table-column>
      <el-table-column prop="k24" label="物料代码" width="160"></el-table-column>
    </el-table>

最后加入如下三个方法

// 把每一行的索引放进row
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    // 添加明细原因 row 当前行 column 当前列
    tabClick(row, column, cell, event) {
      switch (column.label) {
        case "年柜ID":
          this.tabClickIndex = row.index;
          this.tabClickLabel = column.label;
          break;
        case "排数":
          this.tabClickIndex = row.index;
          this.tabClickLabel = column.label;
          break;
        case "例数":
          this.tabClickIndex = row.index;
          this.tabClickLabel = column.label;
          break;
        case "码层":
          this.tabClickIndex = row.index;
          this.tabClickLabel = column.label;
          break;
        case "托盘":
          this.tabClickIndex = row.index;
          this.tabClickLabel = column.label;
          break;
        case "方向":
          this.tabClickIndex = row.index;
          this.tabClickLabel = column.label;
          break;
        case "件数":
          this.tabClickIndex = row.index;
          this.tabClickLabel = column.label;
          break;
        default:
          return;
      }
    },
    // 失去焦点初始化
    inputBlur(scope) {
      if (scope.column.property == "k03" || scope.column.property == "k04") {
        scope.row.k08 =
          scope.row.k03.toString().length * scope.row.k04.toString().length;
      }
      this.tabClickIndex = null;
      this.tabClickLabel = "";
    }