实现 Table 的增加和删除，不依赖后端数据回显-Toy模板网

这篇具有很好参考价值的文章主要介绍了实现 Table 的增加和删除，不依赖后端数据回显。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求

删除前
删除后

分析

首先写一个 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 ? "收起" : "展开" }}
         </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="请选择人员" />
                 </template>
             </a-table-column>
             <a-table-column title="电话" align="center">
                 <template #cell="{ record }">
                     {{ record.fundsReportId || '暂无' }}
                 </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>

我们可以对数组进行操作，首先是增加操作

function addSelectItem() {
    editForm.value.partyMemberList.push({
        memberName: '',
        phone: ''
    })
}

删除指定元素文章来源地址https://www.toymoban.com/news/detail-852959.html

// 参会人员删除
function deleteSelectItem(data, index) {
    console.log(data, index)
    editForm.value.partyMemberList.splice(index, 1)
}

到了这里，关于实现 Table 的增加和删除，不依赖后端数据回显的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

实现 Table 的增加和删除，不依赖后端数据回显

需求

分析

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2