---
order: 2
navTitle: 数据的修改和删除（45分钟）
---
# 数据的修改和删除

> 预计用时：45分钟

本课程以**资产信息的维护**为例，介绍如何在SuperPage中实现数据的修改和删除。

![删除数据](./images/2024-05-14-11-57-21.png)

:::tip 学习小贴士\
点击链接跳转观看学习视频：[数据的修改和删除](https://www.bilibili.com/video/BV1wY41147LV?p=3\&t=3.2)\
可以按照下方[课程讲解](#course)的分解步骤进行学习，学习完之后别忘了完成练习哦！
:::

## 课程目标{#target}

学习本课程可以掌握到如下知识点：

- 输入组件的使用方法，如：文本输入、数值输入、下拉框等
- 组件的交互动作，如：显示对话框/悬浮面板、删除数据、更新数据等

本页面主要实现了对列表当前选中行数据的修改、对勾选行数据的批量修改和删除列表当前选中行的数据。学习完本课程后，即可掌握SuperPage实现数据的修改和删除的基本设置。

![数据的修改和删除](./images/2021_12_10_16_39_47_68.gif)

## 课程讲解{#course}

下面一起学习实现列表数据的增删改查，建议在学习过程中跟着步骤练习操作。

- **（01:05）添加列表操作列和按钮**
- **（01:37）配置修改数据对话框**
- **（04:06）配置修改数据和打开修改对话框交互**
- **（07:13）实现批量修改数据**
- **（11:50）实现删除当前选中数据行数据**

## 总结与练习{#practice}

到这里本节课程就结束了，通过上面的学习请完成练习：

1. 跟随视频完成页面的制作和功能的实现，并完善如下内容：
   1. 调整列表的样式，使编辑和删除按钮边框能完整的在列表中显示出来
   2. 调整编辑对话框的样式，使对话框大小正好包含所有输入组件，没有多余的空白，可以试试组件大小的自适应
   3. 允许用户修改更多的信息
   4. 实现批量删除列表中勾选的数据行，可以参考批量更新数据的方式来实现
2. 扩展文档学习
   1. [风格](../../../guide/app/superpage/design/style/README.md#style)：学完这篇文档后，请为列表中的两个操作按钮设置更美观的风格样式
   2. [提交表单](../../../guide/app/superpage/design/action/submit-data.md)：学完这篇文档后，请描述使用提交表单交互修改数据的基本步骤
   3. [更新数据](../../../guide/app/superpage/design/action/update-data.md)：学完这篇文档后，请描述使用更新数据交互修改数据的基本步骤，并描述与提交表单修改数据之间的区别
   4. [删除数据](../../../guide/app/superpage/design/action/delete-data.md)：学完这篇文档后，请描述如何删除单行数据、如何批量删除数据
   5. [打开链接](../../../guide/app/superpage/design/action/linkto.md)：学习完这篇文档后，在新的SuperPage页面完成对数据的修改，并使用**提交表单**交互提交修改的内容