vue+element-ui實(shí)現(xiàn)表格編輯的三種實(shí)現(xiàn)方式
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="名稱(chēng)" 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ō)的這些在我的開(kāi)發(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)又查詢(xún)了一下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.dbjr.com.cn/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="名稱(chēng)" 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ù)寫(xiě)到要修改的表格中
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.dbjr.com.cn/article/149877.htm
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于element-ui中el-form自定義驗(yàn)證(調(diào)用后端接口)
這篇文章主要介紹了關(guān)于element-ui中el-form自定義驗(yàn)證(調(diào)用后端接口)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了從0到1搭建Element的后臺(tái)框架的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
vue實(shí)現(xiàn)移動(dòng)端div拖動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端div拖動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue實(shí)現(xiàn)戶(hù)籍管理系統(tǒng)戶(hù)籍信息的添加與刪除方式
這篇文章主要介紹了Vue實(shí)現(xiàn)戶(hù)籍管理系統(tǒng)戶(hù)籍信息的添加與刪除方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue實(shí)現(xiàn)跨頁(yè)面定位錨點(diǎn)區(qū)域方式
這篇文章主要介紹了vue實(shí)現(xiàn)跨頁(yè)面定位錨點(diǎn)區(qū)域方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了v-model的基本用法解析，幫助大家更好的理解和學(xué)習(xí)vue v-model的使用方法，感興趣的朋友可以了解下2020-10-10
vue+xlsx實(shí)現(xiàn)表格的導(dǎo)入導(dǎo)出功能
這篇文章主要介紹了vue+xlsx實(shí)現(xiàn)表格的導(dǎo)入導(dǎo)出功能,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了關(guān)于pinia的簡(jiǎn)單使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了Vue+Vant 圖片上傳加顯示的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
解決打包后出現(xiàn)錯(cuò)誤y.a.addRoute is not a function的
這篇文章主要介紹了解決打包后出現(xiàn)y.a.addRoute is not a function的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10