溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1、表格內部顯示和編輯切換
這種方式就是利用兩個標簽顯示隱藏來實現，我們這里用input和span，正常用span將數據顯示，點擊編輯時，將span隱藏，顯示input進行編輯。選中當前行我們可以通過slot-scope中的index去實現，在控制顯示隱藏的屬性上綁定index就可以選中當前行了，如showEdit[index]。
頁面結構代碼：
<el-table
:data="tableData"
tooltip-effect="dark"
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
}
}
實現方法：
//點擊編輯
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) {
},
初始化的時候最好給數組遍歷賦值
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來控制每一行的編輯。上面說的這些在我的開發環境實現一點問題都沒有，但是測試出來了很多bug（沒反應、點擊第一次第二次沒反應等），后來又查詢了一下vue的官方文檔“異步隊列更新”，可能需要加一個Vue.nextTick(callback)。項目比較緊換了另外一種實現方式。有興趣的小伙伴可以看看官方文檔：https://cn.vuejs.org/v2/guide/reactivity.html
2、通過彈出另外一個表格編輯
這個是網上找的一篇文章去實現的，原文鏈接：https://www.jb51.net/article/149870.htm
另外，github上還有實現的代碼，不知道是不是同一個人，為了尊重原創，地址都放在這里：https://github.com/Recklesslmz/elementUI
這種方式實現就簡單多了，初始化table代碼同上，但是可以去掉input編輯框，和showEdit屬性,還需要創建一個隱藏的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) {
//更新的時候就把彈出來的表單中的數據寫到要修改的表格中
var postData = {
name: this.editForm.name;
}
//這里再向后臺發個post請求重新渲染表格數據
this.editFormVisible = false;
}
3.直接通過樣式控制
element-ui中的表格鼠標選中行的時候，行class會自動添加一個current-row，所以通過設置這個class控制編輯和不可編輯標簽的顯示隱藏。具體參考： https://www.jb51.net/article/149877.htm
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
