vue+element-ui實現(xiàn)表格編輯的三種實現(xiàn)方式

更新時間：2018年10月31日 14:11:02 作者：liaoxuewu

這篇文章主要介紹了vue+element-ui實現(xiàn)表格編輯的三種實現(xiàn)方式，主要有表格內(nèi)部顯示和編輯切換，通過彈出另外一個表格編輯和直接通過樣式控制三種方式，感興趣的小伙伴們可以參考一下

1、表格內(nèi)部顯示和編輯切換

這種方式就是利用兩個標簽顯示隱藏來實現(xiàn)，我們這里用input和span，正常用span將數(shù)據(jù)顯示，點擊編輯時，將span隱藏，顯示input進行編輯。選中當前行我們可以通過slot-scope中的index去實現(xiàn)，在控制顯示隱藏的屬性上綁定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
 }
}

實現(xiàn)方法：

//點擊編輯
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) {

},

初始化的時候最好給數(shù)組遍歷賦值

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

2、通過彈出另外一個表格編輯

這個是網(wǎng)上找的一篇文章去實現(xiàn)的，原文鏈接：http://www.dbjr.com.cn/article/149870.htm

另外，github上還有實現(xiàn)的代碼，不知道是不是同一個人，為了尊重原創(chuàng)，地址都放在這里：https://github.com/Recklesslmz/elementUI

這種方式實現(xiàn)就簡單多了，初始化table代碼同上，但是可以去掉input編輯框，和showEdit屬性,還需要創(chuàng)建一個隱藏的dialog，里面放另外一張表單:

<el-dialog title="編輯"
 :visible.sync="editFormVisible"
 :close-on-click-modal="false"
 class="edit-form"
 :before-close="handleClose">
 <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
  <el-form-item label="名稱" prop="Name">
   <el-input v-model="editForm.name" auto-complete="off"></el-input>
  </el-form-item>
 </el-form>
 <div slot="footer" class="dialog-footer">
  <el-button @click.native="handleCancel('editForm')">取消</el-button>
  <el-button type="primary" @click.native="handleUpdate('editForm')">更新</el-button>
 </div>
</el-dialog>

初始化data：

editFormVisible: false, //默認不顯示編輯彈層

方法：

//點擊編輯
handleEdit(index, row) {
 this.editFormVisible = true;
 this.editForm = Object.assign({}, row); //這句是關鍵！??！
},

//點擊關閉dialog
handleClose(done) {
 /*done();
 location.reload();*/
 this.editFormVisible = false;
},

//點擊取消
handleCancel(formName) {
 this.editFormVisible = false;
},

//點擊更新
handleUpdate(forName) { 
 //更新的時候就把彈出來的表單中的數(shù)據(jù)寫到要修改的表格中
 var postData = {
  name: this.editForm.name;
 }

 //這里再向后臺發(fā)個post請求重新渲染表格數(shù)據(jù)
 this.editFormVisible = false;
}

3.直接通過樣式控制

element-ui中的表格鼠標選中行的時候，行class會自動添加一個current-row，所以通過設置這個class控制編輯和不可編輯標簽的顯示隱藏。具體參考： http://www.dbjr.com.cn/article/149877.htm

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: