vue+element 动态表格编辑

代码

<el-table
      :cell-style="changeCellStyle"
      border
      style="width: 100%"
      :height="height"
      :data="tableData"
      highlight-current-row
      @cell-click="cellClick"
    >
      <el-table-column
        key="categoryName"
        prop="categoryName"
        label=""
        v-if="tableData && tableData.length > 0"
        width="200"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in tableColumn"
        :key="index"
        :prop="item"
        :label="item | columnLabel"
        :width="100"
      >
        <template slot-scope="scope">
          <el-input
            v-if="handleType == 'edit' && index < tableColumn.length - 1"
            key="scope.row.scenarioId"
            size="small"
            cursor-spacing="60"
            ref="tableInput"
            v-model="scope.row[item]"
            @blur="removeClass"
            @input="value => handleEdit(value, item, index, scope.row)"
            oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,9})?).*$/g,'$1')"
            onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}"
          ></el-input>
          <span v-else>{{ scope.row[item] }}</span>
        </template>
      </el-table-column>
    </el-table>

js :

handleEdit(value, column, index, row) {
      if (value == 0 || !value) {
        value = 1;
        return;
      }
      const { categoryName, scenarioId, stockingPointId, productId, category } = row || {};
      console.log('value----------------------', value, column, index, row);
 	  let editObj = {
        objId: column.split('#')[0] + row.category,
        quantity: value,
        beginTime: column.split('#')[0],
        endTime: column.split('#')[1],
        category,
        scenarioId,
        stockingPointId,
        productId
      };

      console.log('-editObj--------------------', editObj);

      if (this.editData.length > 0) {
        this.editData = this.editData.filter(n => n.objId != editObj.objId);
        this.editData.push(editObj);
      } else {
        this.editData.push(editObj);
      }
      console.log(this.editData);
    },


   cellClick(row, column, cell, event) {
      for (let i = 0; i < document.getElementsByClassName('current-cell').length; i++) {
        document.getElementsByClassName('current-cell')[i].classList.remove('current-cell');
      }
      cell.classList.add('current-cell');
    },
    removeClass(row, column, cell, event) {
      // console.log(row, column, cell, event);
      // document.getElementsByClassName('current-cell')[0].classList.remove('current-cell');
    }
  }