after reading the materials all day, the train of thought is also messy.
there are several ways for vue to realize in-table editing. For example, through style control, or by embedding input. under table But the actual display effect is still not strong. Yesterday I happened to see other people"s topic about table editing and found that the effect of cooperating with contentEditable is also very good and close to the feeling of excel, but the data can not be saved after modifying the contents of the table. Don"t say too much. Put on the code.

<template>

 <el-container>
<el-header>{{this.tableData}}</el-header>
<el-main>

  <el-table
    
    :data="tableData"
    border
    @cell-click="celledit"

    style="width: 671px;height:243px">
        <el-table-column type="index" ></el-table-column>

    <el-table-column
      prop="date"
      label=""
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label=""
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      width="260"
      label="">
    </el-table-column>
  </el-table>
</el-main>
 </el-container>

</template>


<script>
  export default {
    data() {
      return {
        tableData: [{
          date: "2016-05-02",
          name: "",
          address: " 1518 "
        }, {
          date: "2016-05-04",
          name: "",
          address: " 1517 "
        }, {
          date: "2016-05-01",
          name: "",
          address: " 1519 "
        }, {
          date: "2016-05-03",
          name: "",
          address: " 1516 "
        }]
      }
    },
    methods: {
     celledit(row, column, cell, event) {
      cell.contentEditable = true;
      cell.focus()
     } 
  }
  }
</script>

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)

what result do you expect? What is the error message actually seen?