引言近期專案需要，要在table表格中直接編輯內容，就是所謂的行內編輯，實現效果如下圖，抄別人的圖這是，網上找了很多大多數內容不全，要不講解模糊，要不只提供一部分程式碼，經過整理完善，特別寫了這篇文章。
主要實現原理是：透過v-show顯示隱藏元素來實現行內編輯，true的時候顯示編輯input行，false顯示table內容，我自己專案的效果圖如下：
實現table部分的程式碼如下
table中需要編輯的欄位，我們要設定兩種顯示，input編輯行和span普通內容顯示行
<el-table-columnlabel="專案名稱">
<templatescope="scope">
<el-inputsize="small"v-model="scope.row.name"placeholder="請輸入內容"v-show="scope.row.show">el-input>
<spanv-show="!scope.row.show">{{scope.row.name}}span>
template>
el-table-column>
我們需要v-show來控制顯示那種內容，往往api介面傳過來的值是沒有相關引數的，例如程式碼中使用的show欄位，這時就需要使用forEach()函式，只需要在獲取的資料中增加上就可以了，程式碼實現思路是這樣的
.then(response => {
this.items = response.data.data; //api獲取到的資料
this.total = response.data.total; //分頁欄位
this.items.forEach(element => { element["show"] = false }); }); //增加show，預設false
這樣我們只需要透過控制show值的變化，就可以來控制表格中的內容是編輯狀態還是靜態顯示狀態。
這裡我做了按鈕來控制table的狀態，按鈕是這樣寫的：
<el-button
size="mini"
:type="scope.row.show == true ? 'danger' :'primary'"
@click="scope.row.show == true ? handleSave(scope.$index, scope.row) : handleEdit(scope.$index, scope.row)"
icon="el-icon-edit"
>{{scope.row.show == true ? '儲存' :'編輯'}}
這裡讓按鈕在不同的操作，顯示不同的名稱和函式等，下邊我們來寫handleEdit和handleSave函式
handleEdit(index, row) {
row.show = true
//...業務程式碼
},
如果你執行一下專案，會發現table中毫無變化，why？
我們嘗試著修改table中元素的內容，修改row.name = 1111，這時候表格中就有變化了，原來我們只更新show中的內容，表格是不會觸發雙向繫結修改內容的，但是如果每次修改都要賦值其中一個欄位的內容也不友好，透過查詢，找到了一個this.$set，當我們修改物件的屬性或者增加屬性的時候，檢視沒有跟著修改，也許這個時候就需要用到this.$set()這個方法了。
語法是這樣的
呼叫方法：this.$set( target, key, value )
target：要更改的資料來源(可以是物件或者陣列)
key：要更改的具體資料
value ：重新賦的值
我們重新寫一下上邊的程式碼
handleEdit(index, row) {
this.$set(row,row.show,true)
},
這時候，表格就可以正常進入編輯狀態了，我們編輯完如何儲存呢？
直接獲取row中的資料，axios一下介面就可以了，最後別忘記重新請求一下資料，我為了省事，直接執行一下created中的函式。
handleSave(index, row){
//...業務邏輯，請求等
this.loadData() //重新獲取頁面所有資料
}
這樣基本就完善了，只需要在函式中填充自己需要的業務邏輯就可以了，如有問題可以在下方評論，共同探討。
【來源：IT小超】
宣告：轉載此文是出於傳遞更多資訊之目的。若有來源標註錯誤或侵犯了您的合法權益，請作者持權屬證明與本網聯絡，我們將及時更正、刪除，謝謝。 郵箱地址：[email protected]