El table implements editable table

Realization el-table The editable table of is shown in the figure ：


The following shows some code ：

       <el-table-column label=" Price " min-width="20" align="center">
          <template slot-scope="scope">
            <el-input
              v-if="scope.row.edit"
              v-model="scope.row.price"
              placeholder=" Price "
            ></el-input>
            <span v-else>{
    {
     scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column label=" stock " min-width="20" align="center">
          <template slot-scope="scope">
            <el-input
              v-if="scope.row.edit"
              v-model="scope.row.store"
              placeholder=" stock "
            ></el-input>
            <span v-else>{
    {
     scope.row.store }}</span>
          </template>
        </el-table-column>
          <el-table-column
          label=" operation "
          align="center"
          width="230"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              @click="confirmData(scope.row)"
              v-if="scope.row.edit"
              type="success"
              size="medium"
            >
              <i class="el-icon-check" aria-hidden="true"></i>
            </el-button>
            <div v-else>
              <el-button
                type="primary"
                size="medium"
                @click="editData(scope.row)"
              >
                <i class="el-icon-edit" aria-hidden="true"></i>
              </el-button>
              <el-button
                type="danger"
                size="medium"
                @click="handleDelete(scope)"
              >
                <i class="el-icon-delete" aria-hidden="true"></i>
              </el-button>
            </div>
          </template>
        </el-table-column>

methods：

    editData(row) {
    
      row.edit = true;
      // console.log(row.edit);
      // console.log(row.price);
    },
    confirmData(row) {
    
      row.edit = false;
      // console.log(row.edit);
      // console.log(row.price);
      this.$notify({
    
        title: "Success",
        message: " Edit success ",
        type: "success",
        duration: 2000,
      });
    handleDelete(row, index) {
    
      this.$notify({
    
        title: "Success",
        message: "Delete Successfully",
        type: "success",
        duration: 2000,
      });
      this.list.splice(index, 1);
    },

Be careful ： After writing this, I found that clicking the button changed edit When the value of , Cannot react immediately in view in , And every line will affect , So we dynamically record all arrays add to edit attribute .
stay getList Method to add edit attribute .

  let data = JSON.parse(JSON.stringify(this.list ? this.list : []));
        data.forEach((element) => {
    
          element["edit"] = false;
        });
        this.list = data;