vuejs element table 表格添加行,修改,單獨(dú)刪除行,批量刪除行操作
1.表格動(dòng)態(tài)添加,也可刪除
<template> <div class="TestWord"> <el-button @click="addLine">添加行數(shù)</el-button> <el-button @click="save">保存</el-button> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="bookname" label="書名"> <template slot-scope="scope"> <el-input v-model="scope.row.bookname" placeholder="書名"></el-input> </template> </el-table-column> <el-table-column prop="bookvolume" label="冊(cè)數(shù)"> <template slot-scope="scope"> <el-input v-model="scope.row.bookvolume" placeholder="冊(cè)數(shù)"></el-input> </template> </el-table-column> <el-table-column prop="bookbuyer" label="購買者"> <template slot-scope="scope"> <el-input v-model="scope.row.bookbuyer" placeholder="購買者"></el-input> </template> </el-table-column> <el-table-column prop="bookborrower" label="借閱者"> <template slot-scope="scope"> <el-input v-model="scope.row.bookborrower" placeholder="借閱者"></el-input> </template> </el-table-column> <el-table-column prop="bookbuytime" label="購買日期"> <template slot-scope="scope"> <el-date-picker v-model="scope.row.bookbuytime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="購買日期"> </el-date-picker> </template> </el-table-column> <el-table-column prop="bookbuytime" label="購買日期"> <template slot-scope="scope"> <el-button size="mini" type="danger" v-if="!scope.row.editing" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">刪除 </el-button> </template> </el-table-column> </el-table> </div> </template>
vuejs 代碼
export default { name:'TestWorld', data() { return { tableData:[{ bookname: '', bookbuytime: '', bookbuyer: '', bookborrower: '', bookvolume:'' }] } }, methods:{ addLine(){ //添加行數(shù) var newValue = { bookname: '', bookbuytime: '', bookbuyer: '', bookborrower: '', bookvolume:'' }; //添加新的行數(shù) this.tableData.push(newValue); }, handleDelete(index){ //刪除行數(shù) this.tableData.splice(index, 1) }, save(){ //這部分應(yīng)該是保存提交你添加的內(nèi)容 console.log(JSON.stringify(this.tableData)) } } }
運(yùn)行圖片
2.編輯表格 (即使input已經(jīng)修改過,當(dāng)點(diǎn)擊取消時(shí),內(nèi)容不會(huì)變)
<template> <div class="TestWorld"> <el-button @click="savemodify">保存</el-button> <el-table :data="modifyData" style="width: 100%"> <el-table-column prop="bookname" label="書名"> <template slot-scope="scope"> <template v-if="scope.row.editing"> <el-input class="edit-input" v-model="scope.row.bookname" placeholder="書名"></el-input> </template> <span v-else>{{ scope.row.bookname }}</span> </template> </el-table-column> <el-table-column prop="bookvolume" label="冊(cè)數(shù)"> <template slot-scope="scope"> <template v-if="scope.row.editing"> <el-input class="edit-input" v-model="scope.row.bookvolume" placeholder="冊(cè)數(shù)"></el-input> </template> <span v-else>{{ scope.row.bookvolume}}</span> </template> </el-table-column> <el-table-column prop="bookbuyer" label="購買者"> <template slot-scope="scope"> <template v-if="scope.row.editing"> <el-input class="edit-input" v-model="scope.row.bookbuyer" placeholder="購買者"></el-input> </template> <span v-else>{{scope.row.bookbuyer}}</span> </template> </el-table-column> <el-table-column prop="bookborrower" label="借閱者"> <template slot-scope="scope"> <template v-if="scope.row.editing"> <el-input class="edit-input" v-model="scope.row.bookborrower" placeholder="借閱者"></el-input> </template> <span v-else>{{scope.row.bookborrower}}</span> </template> </el-table-column> <el-table-column prop="bookbuytime" label="購買日期"> <template slot-scope="scope"> <template v-if="scope.row.editing"> <el-date-picker v-model="scope.row.bookbuytime" type="date" value-format="yyyy-MM-dd" placeholder="購買日期"> </el-date-picker> </template> <span v-else>{{scope.row.bookbuytime}}</span> </template> </el-table-column> <el-table-column prop="editing" label="操作"> <template slot-scope="scope"> <el-button type="danger" v-if="!scope.row.editing" icon="el-icon-delete" v-model="scope.$index" @click="handleEdit(scope.$index, scope.row)">編輯 </el-button> <el-button v-else type="danger" icon="el-icon-delete" v-model="scope.$index" @click="handleCancle(scope.$index, scope.row)">取消 </el-button> </template> </el-table-column> </el-table> </div> </template>
vuejs 代碼
export default { name:'TestWorld', data() { return { modifyData:[], prevValue:{} } }, mounted(){ this.getData() }, methods:{ getData(){ this.$ajax({ method: 'get', url:'../static/json/1.1.1.json', //<---本地地址 //url: '/api/drummer/8bd17859', }).then((response)=>{ console.log(JSON.stringify(response.data)) let _data = response.data; let datalength = _data.length; for(let i = 0;i < datalength; i++){ this.$set(_data[i], 'editing', false) } //賦值 this.modifyData = _data; }).catch(function(err){ console.log(err) }) }, handleEdit(index,row){ row.editing = true; console.log(index) this.prevValue = JSON.parse(JSON.stringify(row)); }, handleCancle(index,row){ row.editing = false; let prevContent = this.prevValue.bookname; this.$set(row,"bookname",prevContent); }, savemodify(){ console.log(JSON.stringify(this.modifyData)) } } }
本地的1.1.1.JSON數(shù)據(jù)
[{"bookname":"普通高等教育物聯(lián)網(wǎng)工程專業(yè)規(guī)劃用書:物聯(lián)網(wǎng)技術(shù)概論","bookbuytime": "2016-05-04","bookbuyer": "李曉月","bookborrower": "王小虎","bookvolume":"1"},{"bookname":"區(qū)塊鏈革命:比特幣底層技術(shù)如何改變貨幣、商業(yè)和世界","bookbuytime": "2016-05-04","bookbuyer": "李曉月","bookborrower": "李小虎","bookvolume":"1"},{"bookname":"大家一起學(xué)配色:數(shù)學(xué)色彩設(shè)計(jì)全能書","bookbuytime": "2017-12-04","bookbuyer": "張曉月","bookborrower": "王而虎","bookvolume":"1"}]
如果不用get本地?cái)?shù)據(jù),vuejs如下
export default { name:'TestWorld', data() { return { modifyData:[ { bookname: '普通高等教育物聯(lián)網(wǎng)工程專業(yè)規(guī)劃用書:物聯(lián)網(wǎng)技術(shù)概論', bookbuytime: '2016-05-04', bookbuyer: '李曉月', bookborrower: '王小虎', bookvolume: '1', editing: false }, { bookname: '區(qū)塊鏈革命:比特幣底層技術(shù)如何改變貨幣、商業(yè)和世界', bookbuytime: '2016-05-04', bookbuyer: '李曉月', bookborrower: '李小虎', bookvolume: '1', editing: false }, { bookname: '大家一起學(xué)配色:數(shù)學(xué)色彩設(shè)計(jì)全能書', bookbuytime: '2017-12-04', bookbuyer: '張曉月', bookborrower: '王而虎', bookvolume: '1', editing: false } ], prevValue:{} } }, methods:{ handleEdit(index,row){ //編輯 row.editing = true; console.log(index) this.prevValue = JSON.parse(JSON.stringify(row)); }, handleCancle(index,row){ //取消 row.editing = false; let prevContent = this.prevValue.bookname; this.$set(row,"bookname",prevContent); }, savemodify(){ console.log(JSON.stringify(this.modifyData)) } } }
運(yùn)行圖
3.批量刪除行數(shù)
<template> <div class="TestWorld"> <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table> <div style="margin-top: 20px"> <el-button @click="batchDelete">批量刪除</el-button> <el-button @click="toggleSelection()">取消選擇</el-button> </div> </div> </template>
vuejs 代碼
export default { name:'TestWorld', data() { return { tableData3: [ { date: '2016-05-03', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄' }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄' }, { date: '2016-05-08', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄' },{ date: '2016-05-06', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄' },{ date: '2016-05-07', name: '王小虎', address: '上海市普陀區(qū)金沙江路 1518 弄' }], multipleSelection: [] } }, methods:{ toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }, batchDelete(){ let multData = this.multipleSelection; let tableData =this.tableData3; let multDataLen = multData.length; let tableDataLen = tableData.length; for(let i = 0; i < multDataLen ;i++){ for(let y=0;y < tableDataLen;y++){ if(JSON.stringify(tableData[y]) == JSON.stringify(multData[i])){ //判斷是否相等,相等就刪除 this.tableData3.splice(y,1) console.log("aa") } } } }, handleSelectionChange(val) { this.multipleSelection = val; } } }
有關(guān)驗(yàn)證的代碼,看上面,持續(xù)更新~
以上這篇vuejs element table 表格添加行,修改,單獨(dú)刪除行,批量刪除行操作就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3 添加編輯頁使用 cron 表達(dá)式生成方法小結(jié)
這篇文章主要介紹了vue3 添加編輯頁使用 cron 表達(dá)式生成方法小結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12關(guān)于Vue的URL轉(zhuǎn)跳與參數(shù)傳遞方式
這篇文章主要介紹了關(guān)于Vue的URL轉(zhuǎn)跳與參數(shù)傳遞方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03基于vue2.0實(shí)現(xiàn)簡(jiǎn)單輪播圖
這篇文章主要為大家詳細(xì)介紹了基于vue2.0實(shí)現(xiàn)簡(jiǎn)單輪播圖,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11Vue封裝一個(gè)簡(jiǎn)單輕量的上傳文件組件的示例
這篇文章主要介紹了Vue封裝一個(gè)簡(jiǎn)單輕量的上傳文件組件的示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03關(guān)于vue-router的beforeEach無限循環(huán)的問題解決
本篇文章主要介紹了關(guān)于vue-router的beforeEach無限循環(huán)的問題解決,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09解決axios:"timeout of 5000ms exceeded"
這篇文章主要介紹了解決axios:"timeout of 5000ms exceeded"超時(shí)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08Vue?ElementUI?table實(shí)現(xiàn)雙擊修改編輯某個(gè)內(nèi)容的方法
在實(shí)現(xiàn)表格單元格雙擊編輯功能時(shí),需使用@cell-dblclick事件來觸發(fā)雙擊操作,將單元格切換為input輸入框,通過ref引用和綁定失焦及回車事件來確認(rèn)編輯,同時(shí),需要處理編輯數(shù)據(jù)的更新和方法邏輯的完善2024-09-09