1、表格內部顯示和編輯切換

這種方式就是利用兩個標簽顯示隱藏來實現，我們這里用input和span，正常用span將數據顯示，點擊編輯時，將span隱藏，顯示input進行編輯。選中當前行我們可以通過slot-scope中的index去實現，在控制顯示隱藏的屬性上綁定index就可以選中當前行了，如showEdit[index]。

頁面結構代碼：

<el-table :data="tableData" tooltip-effect="dark" style="width: 100%" header-align="center"> <el-table-column width="50" header-align="center">  <template slot-scope="{row,$index}">   <span>{{$index + 1}}</span>  </template> </el-table-column> <el-table-column label="名稱" prop="Name" width="300" header-align="center">  <template slot-scope="{row,$index}">   <input class="edit-cell" v-if="showEdit[$index]" v-model="row.Name">   <span v-if="!showEdit[$index]">{{row.Name}}</span>  </template> </el-table-column> <el-table-column  fixed="right"  label="操作"  width="100"  header-align="center">  <template slot-scope="{row,$index}">   <el-button type="text" size="small"  @click.native="handleUpdate($index, row)"  v-if="showBtn[$index]">更新</el-button>   <el-button type="text" size="small"  @click.native="handleCancel($index, row)"  v-if="showBtn[$index]">取消</el-button>   <el-button type="text" size="small"  @click.native="handleEdit($index, row)"  v-if="!showBtn[$index]">編輯</el-button>   <el-button type="text" size="small"  @click.native="handleDelete($index, row)"  v-if="!showBtn[$index]">刪除</el-button>  </template> </el-table-column></el-table>

初始化data：

data() { return {  showEdit: [], //顯示編輯框  showBtn: [],  showBtnOrdinary: true }}

實現方法：

//點擊編輯handleEdit(index, row) { this.showEdit[index] = true; this.showBtn[index] = true; this.$set(this.showEdit,row,true) this.$set(this.showBtn,row,true)},//取消編輯handelCancel(index, row) { this.getContentList(); this.showEdit[index] = false; this.showBtn[index] = false;   },//點擊更新handleUpdate(formName) {},//點擊刪除handleDelete(index, row) {},

初始化的時候最好給數組遍歷賦值

for(var i = 0; i < 100; i ++) { this.showEdit[i] = false; this.showBtn[i] = false; this.$set(vm.showEdit[i], false); this.$set(vm.showBtn[i], false);}

另外還可以給row自身添加一個屬性，通過row.showEdit來控制每一行的編輯。上面說的這些在我的開發環境實現一點問題都沒有，但是測試出來了很多bug（沒反應、點擊第一次第二次沒反應等），后來又查詢了一下vue的官方文檔“異步隊列更新”，可能需要加一個Vue.nextTick(callback)。項目比較緊換了另外一種實現方式。有興趣的小伙伴可以看看官方文檔：https://cn.vuejs.org/v2/guide/reactivity.html