使用vue+element-ui实现子表格的单击可编辑

无循环读取数据
实现方法：使用slot-scope="{row,$index}"来获取行的索引值，单击改行，则更改可修改状态editable[$index]。单击时，显示input，其他状态用span显示数据。
template：

 <el-table-column label="名称"  prop="Name" width="300"  header-align="center">
        <template slot-scope="{row,$index}">
             <div  @click="{{changeNum($index)}}">
            <el-input v-if="editable[$index]" v-model='row.Name'></el-input>
            <span v-else>{{row.Name}}</span>
             </div>
        </template>
    </el-table-column>

数据：

editable:[]

方法：

 changeNum(row){
                this.editable[row] = true;
                this.$set(this.editable,row,true)
            },
        }

循环读取数据
不同点：
1、使用<el-form-item v-for="(item,index) in props.row.reportChildList" :key="item" >来获取索引值，方法中的索引值表示为index；
2、不用使用slot-scope。