Table插槽使用el-input输入框内容无法编辑的问题

故事的开始时这样的

技术总监提需求要在el-table中可以随时编辑表格里面的值,当时讨论需求的时候想了一下el-table一顿梭哈没什么难度,爽快的答应了.

but当代码写完的时候发现不能输入东西,但是打印input事件发现是有值的

其实问题是内容已经被修改了，但是table表格因为没有更新数据，所以看起来像是没有修改成功,于是尝试手动set数据,果然成功重新渲染了表格,并且在input框内可以随意修改数据.下面附上代码:

<template>
    <el-table
       :data="selectIdList"
       style="width: 100%">
       <el-table-column
         prop="name"
         label="旧班级名"
         width="180">
       </el-table-column>
       <el-table-column
         label="新班级名">
         <template slot-scope="scope">
           <el-input v-model="scope.row.newName" @input="onExchange(scope)"></el-input>
         </template>
       </el-table-column>
    </el-table>
 </template>
 <script>
   export default {
     data(){
       return {
         selectIdList: [
           {
             id: 1,
             name: '小1班',
             newName: ''
           },
           {
             id: 2,
             name: '小2班',
             newName: ''
           },
         ]
       }
     },
     methods:{
       onExchange(scope){
         let moment = this.selectIdList[scope.$index]
         this.$set(this.selectIdList,scope.$index, moment)
       }
     }
   }
  
 </script>

上面的@input事件就是为了获取到当前行,然后把当前行的数据重新给data数据,从而重新渲染表格.所以,使用element UI时，table表格使用插槽插入input输入框后里面的内容无法编辑问题已经得到解决了.