vue動態(tài)添加行/刪除行的完整代碼示例
更新時(shí)間：2024年02月06日 14:52:12 作者：逸佳6
在開發(fā)中我們常常會碰到這種業(yè)務(wù),有一些數(shù)據(jù)需要在前端進(jìn)行刪除,這篇文章主要給大家介紹了關(guān)于vue動態(tài)添加行/刪除行的相關(guān)資料,需要的朋友可以參考下
頁面效果
點(diǎn)擊相應(yīng)的添加后，每個(gè) el-table 增加一行
代碼：
<el-card>
<div class="titleitem">
<span >工作/學(xué)習(xí)經(jīng)歷</span>
</div>
<el-table
:data="experienceData"
stripe
style="width: 100%">
<el-table-column
prop="starttime"
label="開始時(shí)間"
width="260">
<template slot-scope="scope">
<el-date-picker
type="month"
size="small"
placeholder="選擇年月"
v-model="scope.row.starttime">
</el-date-picker>
<!-- <el-input></el-input> -->
</template>
</el-table-column>
<el-table-column
prop="endtime"
label="結(jié)束時(shí)間"
width="260">
<template slot-scope="scope">
<el-date-picker
type="month"
size="small"
placeholder="選擇年月"
v-model="scope.row.endtime">
</el-date-picker>
<!-- <el-input v-model="scope.row.endtime"></el-input> -->
</template>
</el-table-column>
<el-table-column
prop="resume"
label="簡歷"
width="380">
<template slot-scope="scope">
<el-input v-model="scope.row.resume"></el-input>
</template>
</el-table-column>
<el-table-column
prop="operate"
label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="success"
icon="el-icon-save"
@click="handlesaveExperience(scope.$index, scope.row)">保存
</el-button>
<el-button
size="mini"
type="danger"
icon="el-icon-delete"
@click="handleDeleteExperience(scope.$index, scope.row)">刪除
</el-button>
</template>
</el-table-column>
</el-table>
<div>
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAddExperienceline">新增學(xué)習(xí)/工作簡歷
</el-button>
</div>
</el-card>
<el-card>
<div class="titleitem">
<span >獎懲情況</span>
</div>
<el-table
:data="bonuspenaltyData"
stripe
style="width: 100%">
<el-table-column
prop="status"
label="獎勵/懲罰"
width="100">
<template slot-scope="scope">
<el-input v-model="scope.row.status"></el-input>
</template>
</el-table-column>
<el-table-column
prop="date"
label="獎懲年月"
width="260">
<template slot-scope="scope">
<el-date-picker
type="month"
size="small"
placeholder="選擇年月"
v-model="scope.row.date">
</el-date-picker>
<!-- <el-input></el-input> -->
</template>
</el-table-column>
<el-table-column
prop="num"
label="獎懲文號"
width="180">
<template slot-scope="scope">
<el-input v-model="scope.row.num"></el-input>
</template>
</el-table-column>
<el-table-column
prop="remarks"
label="備注"
width="360">
<template slot-scope="scope">
<el-input v-model="scope.row.remarks"></el-input>
</template>
</el-table-column>
<el-table-column
prop="operate"
label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="success"
icon="el-icon-save"
@click="handlesaveBonuspenalt(scope.$index, scope.row)">保存
</el-button>
<el-button
size="mini"
type="danger"
icon="el-icon-delete"
@click="handleDeleteBonuspenalt(scope.$index, scope.row)">刪除
</el-button>
</template>
</el-table-column>
</el-table>
<div>
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAddBonuspenaltLine">新增獎懲情況
</el-button>
</div>
</el-card>
<el-card>
<div class="titleitem">
<span >年度考核</span>
</div>
<el-table
:data="AnnualAssessmentData"
stripe
style="width: 100%">
<el-table-column
prop="year"
label="年度"
width="260">
<template slot-scope="scope">
<el-date-picker
type="year"
size="small"
placeholder="選擇年"
v-model="scope.row.year">
</el-date-picker>
<!-- <el-input v-model="scope.row.year"></el-input> -->
</template>
</el-table-column>
<el-table-column
prop="result"
label="結(jié)果"
width="260">
<template slot-scope="scope">
<el-input v-model="scope.row.result"></el-input>
</template>
</el-table-column>
<el-table-column
prop="remarks"
label="備注"
width="380">
<template slot-scope="scope">
<el-input v-model="scope.row.remarks"></el-input>
</template>
</el-table-column>
<el-table-column
prop="operate"
label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="success"
icon="el-icon-save"
@click="handlesaveAnnualAssessment(scope.$index, scope.row)">保存
</el-button>
<el-button
size="mini"
type="danger"
icon="el-icon-delete"
@click="handleDeleteAnnualAssessment(scope.$index, scope.row)">刪除
</el-button>
</template>
</el-table-column>
</el-table>
<div>
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAddAnnualAssessmentLine">新增年度考核
</el-button>
</div>
</el-card>data部分
data() {
return {
options:[],
value:'',
value1:'',
month1:'',
month2:'',
experienceData: [{
starttime: '1996-05',
endtime: '1999-06',
resume: '就讀于xxxx學(xué)習(xí)xxxx專業(yè)',
}, ],
bonuspenaltyData:[{
status:'獎勵',
date:'2022-05',
num:'123456',
remarks:'助人為樂'
}],
AnnualAssessmentData: [{
year:'2021',
result:'合格',
remarks:'考核通過',
}],
};
},methods部分
methods: {
//增加經(jīng)驗(yàn)行
handleAddExperienceline() {
if (this.experienceData == undefined) {
this.experienceData = new Array();
}
let obj = {};
this.experienceData.push(obj);
},
//保存經(jīng)驗(yàn)行
handlesaveExperience(a, b) {
console.log(a + b);
},
//刪除經(jīng)驗(yàn)行
handleDeleteExperience(index) {
console.log(index);
this.experienceData.splice(index, 1)
},
//增加獎懲行
handleAddBonuspenaltLine() {
if (this.bonuspenaltyData == undefined) {
this.bonuspenaltyData = new Array();
}
let obj = {};
this.bonuspenaltyData.push(obj);
},
//保存獎懲行
handlesaveBonuspenalt(a, b) {
console.log(a + b);
},
//刪除獎懲行
handleDeleteBonuspenalt(index) {
console.log(index);
this.bonuspenaltyData.splice(index, 1)
},
//增加年度考核行
handleAddAnnualAssessmentLine() {
if (this.AnnualAssessmentData == undefined) {
this.AnnualAssessmentData = new Array();
}
let obj = {};
this.AnnualAssessmentData.push(obj);
},
//保存年度考核行
handlesaveAnnualAssessment(a, b) {
console.log(a + b);
},
//刪除年度考核行
handleDeleteAnnualAssessment(index) {
console.log(index);
this.AnnualAssessmentData.splice(index, 1)
},
}注意：
若缺依賴，安裝相應(yīng)依賴。
總結(jié)
到此這篇關(guān)于vue動態(tài)添加行/刪除行的文章就介紹到這了,更多相關(guān)vue動態(tài)添加行刪除行內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue里input根據(jù)value改變背景色的實(shí)例
今天小編就為大家分享一篇vue里input根據(jù)value改變背景色的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了深入理解vue $refs的基本用法 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了Vue前端對axios的封裝和使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vant如何修改placeholder樣式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解
這篇文章主要為大家介紹了SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-08-08
vue單應(yīng)用在ios系統(tǒng)中實(shí)現(xiàn)微信分享功能操作
這篇文章主要介紹了vue單應(yīng)用在ios系統(tǒng)中實(shí)現(xiàn)微信分享功能操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue中this.$confirm的使用及說明方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue keep-alive實(shí)踐總結(jié)（推薦）
本篇文章主要介紹了Vue keep-alive實(shí)踐總結(jié)（推薦），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
自定義指令是 vue 中使用頻率僅次于組件，其包含 bind 、 inserted 、 update 、 componentUpdated 、 unbind 五個(gè)生命周期鉤子，接下來通過本文給大家詳細(xì)介紹Vue指令工作原理實(shí)現(xiàn)方法，需要的朋友參考下吧2021-06-06
詳解webpack+vue-cli項(xiàng)目打包技巧
本篇文章主要介紹了詳解webpack+vue-cli項(xiàng)目打包技巧 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06