el-table点击单元格出现input框可编辑

<el-table
        :data="data"
        border
        style="width: 100%"
        :cell-class-name="tableRowClassName"
        @cell-click="handleRowClick"
      >
       <el-table-column
          min-width="120px"
          align="center"
          v-for="(item, i) in totalDays"
          :label="i + 1 + '日'"
          :prop="'data' + (i + 1)"
          :key="i"
        >
          <template slot-scope="scope">
            <div
              v-if="
                scope.row.index === clickRowIndex &&
                tabClickLabel == scope.column.label &&
                i + 1 <= day
              "
            >
              <el-input
                size="small"
                class="myClass"
                v-model="scope.row['data' + (i + 1)]"
                style="float: left; text-align: right; border: 0"
                @blur="inputBlur(scope.row)"
              ></el-input>
            </div>
            <span v-else>{{ scope.row["data" + (i + 1)] }}</span>
          </template>
        </el-table-column>
          </el-table>

 tableRowClassName({ row, rowIndex, columnIndex, column }) {
      // 把每一行的索引放进row
      row.index = rowIndex;
    },
    handleRowClick(row, column) {
      this.clickCellIndex = row.index;
      this.clickCellLabel = column.label;
    },
    inputBlur(row) {
      this.clickRowIndex = null;
      this.tabClickLabel = "";
    },