效果圖展示
當在表格中點擊編輯按鈕時:點擊的行變成文本框且數據回顯可以點擊確定按鈕修改數據或者取消修改回退數據:
具體實現步驟
1. 行數據定義編輯標記
行數據定義編輯標記
當在組件中獲取到用于表格展示數據的方法中,針對每一行數據添加一個編輯標記
this.list.forEach(item => {// item.isEdit = false // 添加一個屬性 初始值為false// 數據響應式的問題 數據變化 視圖更新// 添加的動態屬性 不具備響應式特點// this.$set(目標對象, 屬性名稱, 初始值) 可以針對目標對象 添加的屬性 添加響應式this.$set(item, 'isEdit', false)})
注意:為什么不使用item.isEdit = false , 因為動態添加的屬性不具備響應式的特點,如果想要具備響應式,可以使用$set
2. 點擊行編輯標記狀態(isEdit
)
點擊編輯時,將當前行的標記isEdit設置為true
<el-table-column align="center" label=&