??????? 在項(xiàng)目開(kāi)發(fā)中，有這樣一個(gè)需求，點(diǎn)擊按鈕時(shí)，新增一行input文本框，且文本框后面有刪除操作，點(diǎn)擊刪除還可以刪除當(dāng)前行。
??????? 實(shí)現(xiàn)效果如下圖所示：
????????
?????? 主要代碼布局如下：
?????????主要代碼如下：
??????? 1.聲明變量
fileNameList: [{
fileName: ''
}]??????? 2.頁(yè)面元素標(biāo)簽
<el-row>
<el-col :span="21">
<el-form-item label="" prop="" label-width="10px">
以下名稱。。。
</el-form-item>
</el-col>
<el-col :span="2">
<el-button size="mini" title="新增" class="editBtn" @click="addShareFolder"><svg-icon icon-class="add" /></el-button>
</el-col>
</el-row>
<div style="height: 147px;overflow-y: auto">
<el-row v-for="(e, index) in temp.fileNameList" :key="index">
<el-col :span="19">
<el-form-item label="名稱" prop="folder" label-width="60px">
<el-input v-model="e.fileName" placeholder="請(qǐng)輸入"></el-input>
</el-form-item>
</el-col>
<el-col :span="3">
<label class="exceptionHoles-delete" @click="deleteRow(index)">刪除</label>
</el-col>
</el-row>
</div>??????? 3.新增刪除事件文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-519983.html
/**
* 新增<前端假新增>
*/
addShareFolder() {
this.temp.fileNameList.push({
fileName: ''
})
},
/**
* 刪除<前端假刪除>
* @param index 當(dāng)前點(diǎn)擊元素索引
*/
deleteRow(index) {
// console.log('index', index)
this.$confirmBox('確定刪除？', '提示').then(() => {
for (let i = 0; i < this.temp.fileNameList.length; i++) {
if (index === i) {
this.temp.fileNameList.splice(i, 1)
this.$notify({
title: '成功',
message: '刪除成功',
type: 'success',
duration: 2000
})
}
}
})
}??????? 以上就簡(jiǎn)單的實(shí)現(xiàn)了一個(gè)前端的假新增刪除操作文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-519983.html
到了這里，關(guān)于vue點(diǎn)擊按鈕時(shí)，新增或刪除一行表單元素的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![el-table點(diǎn)擊表格某一行添加到URL參數(shù)，訪問(wèn)帶參URL加載表格內(nèi)容并滾動(dòng)到選中行位置 [Vue3] [Element-plus 2.3]](https://imgs.yssmx.com/Uploads/2024/02/621970-1.png)
