如何实现可编辑的单元格？

Question

Answer 1

解决思路：
点击单元格可以弹出输入或编辑弹窗，然后再将输入的内容渲染到指定单元格上。

Answer 2

<el-button v-else type="primary" class="reset" @click="edit"
            >编辑</el-button
          >
<el-table
          :data="listData"
          style="width: 100%"
          border
          :span-method="objectSpanMethod"
        >
          <el-table-column
            v-for="col in cols"
            :key="col.index"
            :prop="col.prop"
            :label="col.label"
          >
            <template slot-scope="scope">
              <input
                v-if="col.prop === 'remarks' && isEdit"
                type="text"
                v-model="scope.row.remarks"
              />

              <span v-else>{{ scope.row[col.prop] }}</span>
            </template>
          </el-table-column>
        </el-table>
data(){
    return {
      isEdit: false,
    }
}
 methods: {
 // 编辑
    edit() {
      this.isEdit = true;
    },
}