需求
-
刪除前
-
刪除后
分析
首先寫(xiě)一個(gè) Table
<a-card style="width:100%">
<template#extra>
<a-button type="text" @click="addSelectItem" style="margin-right: 5px">
添加
</a-button>
<a-button type="text" @click="packUpOrCloseVisible = !packUpOrCloseVisible">{{
packUpOrCloseVisible ? "收起" : "展開(kāi)" }}
</a-button>
</template>
<a-table v-if="packUpOrCloseVisible" :data="editForm.partyMemberList" :bordered="false"
:pagination="false" style="width:100%">
<template #columns>
<a-table-column title="姓名" align="center">
<template #cell="{ record }">
<el-input v-model="record.memberName" placeholder="請(qǐng)選擇人員" />
</template>
</a-table-column>
<a-table-column title="電話(huà)" align="center">
<template #cell="{ record }">
{{ record.fundsReportId || '暫無(wú)' }}
</template>
</a-table-column>
<a-table-column title="操作" align="center">
<template #cell="{ record, rowIndex }">
<a-button type="text" @click="deleteSelectItem(record, rowIndex)"
status="danger">
<template #icon><icon-delete /></template>
刪除
</a-button>
</template>
</a-table-column>
</template>
</a-table>
</a-card>
我們可以對(duì)數(shù)組進(jìn)行操作，首先是增加操作文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-852959.html
function addSelectItem() {
editForm.value.partyMemberList.push({
memberName: '',
phone: ''
})
}
刪除指定元素文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-852959.html
// 參會(huì)人員刪除
function deleteSelectItem(data, index) {
console.log(data, index)
editForm.value.partyMemberList.splice(index, 1)
}
到了這里，關(guān)于實(shí)現(xiàn) Table 的增加和刪除，不依賴(lài)后端數(shù)據(jù)回顯的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[MySQL]數(shù)據(jù)的增加(插入)、修改、刪除與計(jì)算列](https://imgs.yssmx.com/Uploads/2024/01/405711-1.png)
