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

需求

  • 删除前

  • 删除后

分析

首先写一个 Table

javascript 复制代码
 <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>

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

javascript 复制代码
function addSelectItem() {
    editForm.value.partyMemberList.push({
        memberName: '',
        phone: ''
    })
}

删除指定元素

javascript 复制代码
// 参会人员删除
function deleteSelectItem(data, index) {
    console.log(data, index)
    editForm.value.partyMemberList.splice(index, 1)
}
相关推荐
musk12126 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录2 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css