基于Axure与Element UI风格的左滑删除行表格设计

预览：https://2tn7fx.axshare.com

1. 创建基本表格结构

1. 打开Axure RP：启动Axure RP软件并创建一个新的项目。
2. 拖放表格元件：从元件库中拖放一个"表格"元件到画布上。
3. 设置表格列数和行数：根据需求设置表格的列数（例如序号、日期、姓名、省份、状态、地址）和初始行数（可以先设置几行作为示例）。
4. 调整列宽：根据内容长度调整每列的宽度，使其看起来整齐美观。

2. 填充表格内容

1. 输入表头文本：在表格的第一行（表头行）中，分别输入"序号"、"日期"、"姓名"、"省份"、"状态"、"地址"。
2. 填充数据行：在后续行中，填充示例数据，如日期、姓名、省份、状态（已发货、已签收、待发货）和地址信息。

3. 设计左滑删除功能

1. 添加删除图标 ：
   • 从元件库中拖放一个"图标"元件（例如一个垃圾桶图标）到每一行的最左侧，作为删除图标。
   • 调整图标的大小和位置，使其位于每行的左侧中间位置。
2. 设置交互效果 ：
   • 选中某一行（不包括表头行），在"交互"面板中点击"新建交互"。
   • 选择"拖动时"事件，然后选择"移动"动作。
   • 在"移动"设置中，选择"水平拖动"，并设置移动的边界（例如向左移动的最大距离为删除图标的宽度）。
   • 再新建一个交互，选择"拖动结束时"事件。
   • 在"拖动结束时"的交互中，添加条件判断：如果拖动距离超过一定阈值（例如50像素），则显示删除图标；否则，将行移回原始位置。
   • 当删除图标显示时，再为删除图标添加"单击时"事件，设置"删除"动作，删除当前行。

4. 遵循Element UI风格

1. 颜色和字体 ：
   • 表头背景色可以设置为浅灰色（如#F5F7FA），字体加粗。
   • 表格内容字体使用常规字体，颜色为深灰色（如#606266）。
   • 状态列根据不同的状态使用不同的颜色标识，例如"已发货"用绿色，"已签收"用蓝色，"待发货"用橙色。
2. 边框和间距 ：
   • 为表格添加细边框，颜色为浅灰色（如#EBEEF5）。
   • 调整行高和列间距，使其符合Element UI的紧凑风格。

5. 预览和测试

1. 预览：点击Axure工具栏中的"预览"按钮，查看表格的显示效果和交互功能是否正常。
2. 测试左滑删除：在预览界面中，尝试左滑某一行，查看删除图标是否显示，以及单击删除图标是否能正确删除该行。

通过以上步骤，你可以在Axure中设计出一个遵循Element UI风格的左滑删除行表格。这样的表格在实际项目中可以提供良好的用户体验，方便用户快速删除不需要的数据行。