el-table实现单元格编辑

<el-table id="table" :data="tableData" border style="width: 100%" height="730px" @cell-click="editName" @cell-dblclick="editData">

        <el-table-column :prop="item" :label="item" v-for="(item, index) in titleList" :key="index" min-width="180px">

          <template v-slot="scope">

            <el-input v-if="scope.row[scope.column.property + 'isShow']" :ref="scope.column.property" v-model="scope.row[item]" @blur="alterData(scope.row,scope.column)"></el-input>

            <span v-else>{{ scope.row[item] }}</span>

          </template>

        </el-table-column>

      </el-table>
      

const editName = (row, column) => {
  row[column.property + 'isShow'] = true;
};
const editData = (row, column) => {
  console.log('object', column);
  row[column.property + 'isShow'] = true;
};
const alterData = (row, column) => {
  row[column.property + 'isShow'] = false;
  state.isChange = true;
};