目錄
前言
正文
1.簡單表格行內(nèi)內(nèi)部可編輯
2. 數(shù)據(jù)從后端取得表格行內(nèi)可編輯
3.批量表格整體的可編輯
結(jié)語
前言
后臺系統(tǒng)都是各種表格表單編輯，整理了下常見的幾種實現(xiàn)表格編輯的方式，希望有用。使用框架：vue+element

表格行內(nèi)內(nèi)部可編輯
數(shù)據(jù)從后臺取得的表格行內(nèi)可編輯
表格整體的可編輯
正文
1.簡單表格行內(nèi)內(nèi)部可編輯
原理就是span 和 input 的切換顯隱。

代碼：

<template><div><el-table :data="tabledatas" border><el-table-column label="tab1"><template slot-scope="scope"><el-input placeholder="請輸入內(nèi)容" v-show="scope.row.show" v-model="scope.row.tab1"></el-input><span v-show="!scope.row.show">{{scope.row.tab1}}</span></template></el-table-column><el-table-column label="tab2"><template slot-scope="scope"><el-input placeholder="請輸入內(nèi)容" v-show="scope.row.show" v-model="scope.row.tab2"></el-input><span v-show="!scope.row.show">{{scope.row.tab2}}</span></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button @click="scope.row.show =true">編輯</el-button><el-button @click="scope.row.show =false">保存</el-button></template></el-table-column></el-table></div> </template> <script>export default {data() {return {tabledatas: [{ tab1: '111', tab2: '2222',show:true},{ tab1: 'aaa', tab2: 'bbb' ,show:false},],}},} </script>

數(shù)據(jù)從后端取得表格行內(nèi)可編輯
從后臺取得的數(shù)據(jù)，可能沒有show這個屬性，所以在接收數(shù)據(jù)的時候操作一下，加這個屬性，效果依然。但此時也會遇見保存時候需要把這個屬性去掉，不影響傳輸正確數(shù)據(jù)。

代碼：

<template><div><el-table :data="tabledatas" border><el-table-column type="selection"></el-table-column><el-table-column label="tab1"><template slot-scope="scope"><el-input placeholder="請輸入內(nèi)容" v-show="scope.row.show" v-model="scope.row.tab1"></el-input><span v-show="!scope.row.show">{{scope.row.tab1}}</span></template></el-table-column><el-table-column label="tab2"><template slot-scope="scope"><el-input placeholder="請輸入內(nèi)容" v-show="scope.row.show" v-model="scope.row.tab2"></el-input><span v-show="!scope.row.show">{{scope.row.tab2}}</span></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button @click="scope.row.show =true">編輯</el-button><el-button @click="scope.row.show =false">保存</el-button></template></el-table-column></el-table></div> </template> <script>export default {data() {return {tabledatas: [],}},created() {// 發(fā)請求去后臺拿數(shù)據(jù),如果有api，就正常請求，//我這里是demo，就簡單給list賦值了，原理一樣。// getlistApi().then(res => {// let list = res.data.listlet list = [{ tab1: 'tast2', tab2: 'tast333' },{ tab1: 'aaa', tab2: 'bbb' },]list.forEach(element => {element["show"] = false});this.tabledatas = list// })},} </script>

3.批量表格整體的可編輯
效果圖：

代碼：

<template><div><el-button @click="show =true">編輯</el-button><el-button @click="show =false">提交</el-button><el-table :data="tabledatas" border><el-table-column label="tab1"><template slot-scope="scope"><el-input placeholder="請輸入內(nèi)容" v-show="show" v-model="scope.row.tab1"></el-input><span v-show="!show">{{scope.row.tab1}}</span></template></el-table-column><el-table-column label="tab2"><template slot-scope="scope"><el-input placeholder="請輸入內(nèi)容" v-show="show" v-model="scope.row.tab2"></el-input><span v-show="!show">{{scope.row.tab2}}</span></template></el-table-column></el-table></div> </template> <script>export default {data() {return {tabledatas: [{ tab1: '111', tab2: '2222' },{ tab1: 'aaa', tab2: 'bbb'},],show:false}},} </script>

結(jié)語
這是編輯保存功能，下篇順便寫一下行內(nèi)和批量刪除和增加行的功能吧~
附：vue+element的表格最優(yōu)實現(xiàn)單條和批量修改、保存、復(fù)制、刪除、新增、提交數(shù)據(jù)功能

如果本文對你有幫助的話，請給我點贊打call哦~o(￣▽￣)ｄo
有其他問題留言 over~

總結(jié)

以上是生活随笔為你收集整理的vue element项目常见实现表格内部可编辑功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。