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

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

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

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

這種方式就是利用兩個(gè)標(biāo)簽顯示隱藏來(lái)實(shí)現(xiàn)，我們這里用input和span，正常用span將數(shù)據(jù)顯示，點(diǎn)擊編輯時(shí)，將span隱藏，顯示input進(jìn)行編輯。選中當(dāng)前行我們可以通過(guò)slot-scope中的index去實(shí)現(xiàn)，在控制顯示隱藏的屬性上綁定index就可以選中當(dāng)前行了，如showEdit[index]。

頁(yè)面結(jié)構(gòu)代碼：

<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
 }
}

實(shí)現(xiàn)方法：

//點(diǎ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;
   },

//點(diǎn)擊更新
handleUpdate(formName) {

},
//點(diǎn)擊刪除
handleDelete(index, row) {

},

初始化的時(shí)候最好給數(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自身添加一個(gè)屬性，通過(guò)row.showEdit來(lái)控制每一行的編輯。上面說(shuō)的這些在我的開發(fā)環(huán)境實(shí)現(xiàn)一點(diǎn)問(wèn)題都沒(méi)有，但是測(cè)試出來(lái)了很多bug（沒(méi)反應(yīng)、點(diǎn)擊第一次第二次沒(méi)反應(yīng)等），后來(lái)又查詢了一下vue的官方文檔“異步隊(duì)列更新”，可能需要加一個(gè)Vue.nextTick(callback)。項(xiàng)目比較緊換了另外一種實(shí)現(xiàn)方式。有興趣的小伙伴可以看看官方文檔：https://cn.vuejs.org/v2/guide/reactivity.html

2、通過(guò)彈出另外一個(gè)表格編輯

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

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

這種方式實(shí)現(xiàn)就簡(jiǎn)單多了，初始化table代碼同上，但是可以去掉input編輯框，和showEdit屬性,還需要?jiǎng)?chuàng)建一個(gè)隱藏的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, //默認(rèn)不顯示編輯彈層

方法：

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

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

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

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

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

3.直接通過(guò)樣式控制

element-ui中的表格鼠標(biāo)選中行的時(shí)候，行class會(huì)自動(dòng)添加一個(gè)current-row，所以通過(guò)設(shè)置這個(gè)class控制編輯和不可編輯標(biāo)簽的顯示隱藏。具體參考： http://www.dhdzp.com/article/149877.htm

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: