---
order: 1
navTitle: 数据的新增（45分钟）
---
# 数据的新增

> 预计用时：45分钟

本课程以**资产信息的维护**为例，介绍如何在SuperPage中实现新增数据。

![新增数据](./images/2024-05-14-11-54-58.png)

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

## 课程目标{#target}

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

- 进一步了解列表组件的使用方法，如：新增操作列等
- 输入组件的使用方法，如：文本输入、数值输入、下拉框等
- 组件的交互动作，如：提交表单、显示对话框/悬浮面板等

本课程以资产信息维护为例来展开学习，主要实现使用**列表**组件展示数据，并在对话框中配置新增数据的表单和数据提交的相关交互。学习完本课程后，即可掌握在SuperPage中实现数据的新增。

![数据的新增](./images/2021_12_10_16_37_13_884.gif)

## 课程讲解{#course}

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

- **（00:37）引入资产信息维护表**
- **（01:00）列表展示数据**
- **（02:09）配置新增按钮及新增对话框**
- **（09:30）配置数据提交和打开新增对话框交互**

## 总结与练习{#practice}

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

1. 跟随视频完成页面的制作和功能的实现，并完善如下内容：
   1. 列表上展示更多的资产信息
   2. 设置新增时资产的金额、状态、采购时间必须填写
   3. 新增资产信息时，使用人默认为自己
   4. 增加提交再次确认功能：点击按钮提交数据时，需要再次确认才能提交数据
2. 扩展文档学习
   1. [提交表单](../../../guide/app/superpage/design/action/submit-data.md)：学完这篇文档后，请描述使用提交表单新增数据的基本步骤
   2. [插入数据](../../../guide/app/superpage/design/action/insert-data.md)：学完这篇文档后，请描述插入数据和提交表单交互在新增数据上的区别
   3. [列表](../../../guide/app/superpage/components/data/list.md)：学完这篇文档后，请美化列表中标题行和数据行的样式，并显示列表中的数据行序号
   4. [对话框](../../../guide/app/superpage/components/embed/dialog.md)：学完这篇文档后，请描述对话框的使用步骤
   5. [打开链接](../../../guide/app/superpage/design/action/linkto.md)：
      1. 学习完这篇文档后，请描述打开链接不同**模式**的区别
      2. 实现点击新增按钮时打开新的SuperPage页面，并在新页面中完成资产信息的新增