--- order: 26 navTitle: 删除数据 --- # SuperPage交互-删除数据 **删除数据**交互用于模型表中的数据删除，常与[列表](../../components/data/list.md)搭配使用。如下动图所示，在列表中删除指定数据： ![示例动图](./images/2021_04_13_09_48_32.gif) 示例地址：[列表-增删改查](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E5%88%97%E8%A1%A8) ## 使用删除数据{#use} **删除数据**交互通常搭配[列表](../../components/data/list.md)组件使用，设置了**删除数据**交互的[按钮](../../components/common/button.md)可放在[列表](../../components/data/list.md)内删除对应行数据，或放在[列表](../../components/data/list.md)外勾选删除多行数据，具体制作步骤如下： ![制作步骤](./images/2021_04_13_10_13_32.gif) 1. 删除列表当前行 - 在[列表](../../components/data/list.md)中添加操作按钮，并为按钮添加**删除数据**交互 - 在交互属性设置>**数据**中指定要删除的数据模型，此处通常与列表使用的数据一致 - 设置**数据范围**为**当前行**，意为列表中每一行的按钮仅能删除所在行的数据 2. 删除列表勾选行 - [列表](../../components/data/list.md)中需要设置勾选框，在列表外部设置按钮，添加**删除数据**交互 - 在交互属性设置>**数据**中指定要删除的数据模型 - 设置**数据范围**为**勾选的**，此时会多出**数据组件**属性，选择勾选数据的对象组件，即第一步中设置的[列表](../../components/data/list.md) ## 数据的删除范围{#deleterange} 在交互设置**数据**属性中指定好对象模型表后，可在**数据范围**中设置数据的删除范围，有以下几种： - 勾选的：此范围下需要设置**数据组件**属性，需要确认勾选数据的载体组件，通常是[列表](../../components/data/list.md) - 当前行：应用于[列表](../../components/data/list.md)内部按钮，删除触发交互所在行的数据 - 高亮的：高亮选中，类似于勾选，只是操作体验不同 - 当前查询结果：删除指定模型表中当前过滤出的数据，如可通过[字段过滤](../../components/input/fieldsfilter.md)组件来过滤列表数据，删除当前查询结果可起到清空列表的作用 ## 暂存数据{#tmpstorage} **暂存**可以将数据保存在浏览器页面的对象数据集中。**暂存**后，页面中展示的数据将显示为删除后的内容，需要再次使用[提交表单](./submit-data.md)交互将删除后的数据提交至数据库中。可参考[提交表单](./submit-data.md)中**暂存**的使用方法。 ## 提示信息设置{#tooltips} **删除数据**交互完成前后可自定义提示信息，设置后会在交互动作完成前后弹出对话框确认，具体设置可参考[提交表单](./submit-data.md)。 ## 应用场景{#apply} ### 列表数据的删除{#apply-list} 与[列表](../../components/data/list.md)结合的**删除数据**应用场景主要分为三种： - 列表内删除当前行 - 列表外批量删除勾选行 - 清空当前查询结果，即删除当前列表所有数据 前两类应用场景已在[使用删除数据](#use)中说明，此处不再重复。删除列表当前所有数据需要用到删除**当前查询结果**，如下动图中点击清空即为删除当前列表中查询出的结果： ![清空](./images/2021_04_13_18_13_32.gif) 示例地址：[列表增删改查](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E5%88%97%E8%A1%A8%E5%A2%9E%E5%88%A0%E6%94%B9%E6%9F%A5) 1. 给要删除数据的模型表设置过滤条件，或者也可以搭配[字段过滤](../../components/input/fieldsfilter.md)组件来过滤数据源 2. 删除数据交互设置中**数据**指定为第1步设置过滤条件的数据源，**数据范围**指定为**当前查询结果**