测试需求平台13-Table组件应用产品列表优化

✍ 此系列为整理分享已完结入门搭建《TPM提测平台》系列的迭代版，拥抱Vue3.0将前端框架替换成字节最新开源的arco.design，其中约60%重构和20%新增内容，定位为从 0-1手把手实现简单的测试平台开发教程，内容将囊括基础、扩展和实战，由浅入深带你实现测试开发岗位中平台工具技术能力入门和提升。

正式开始前，帮朋友做一个小测试，插播一个职场小调查，希望了解下大家在职场里的求职考量。点击下方小程序或底部阅读原文均可参与填写，多谢！

参与过后让我们来继续重构系列，本篇内容主要利用一些小点优化表格数据。

1.气泡确认Popconfirm

点击元素，弹出气泡式的确认框，一般可替代Modal对话框实现便捷的二次确认操作。

1.1 组件构成

由基本触发器和浮层构成

触发器：点击触发器将唤起气泡确认框，触发器一般为按钮或链接
浮层：为确认框容器，其中包含了提示性文字和需要用户确认的操作

1.2 组件用法

气泡确认框是一种轻量的反馈方式，承载的内容也相对较少，主要用于二次确认操作。对比较为常规的对话框二次确认，气泡确认框从形式上更轻量，干扰更小，控件的打开关闭方式也更为便捷

代码语言：javascript复制

<template>
  <a-popconfirm content="你确定要删除此信息吗?">
    <a-button>是否删除</a-button>
  </a-popconfirm>
</template>

Popconfirm组件同样有Props属性具体参考引用

更多API：https://arco.design/vue/component/popconfirm#API

本篇主要用到一个ok按钮Events，即点击确认按钮时触发，对应还有个 cancel事件，默认是关闭确认对话框，如确认操作无特殊交互逻辑无需处理。

1.3 应用实战

参考上一篇编辑的基础上增加行废弃菜单按钮，外层直接包裹确认气泡popconfirm，而真正实现软删除的操作也是放在气泡的确认按钮上。

代码语言：javascript复制

<a-table :columns="columns" :data="renderList" :pagination="false" >
<template #optional="{ record }">
  <a-button type="text" @click="editButtonClick(record)">编辑</a-button>
   <a-popconfirm content="你确定要废弃此产品吗？" type="warning" @ok="deleteButtonClick(record.id)">
    <a-button type="text">废弃</a-button>
   </a-popconfirm>
  </template>
</a-table>

有个组件绑定，剩下只需要实现接口和触发删除逻辑就行了，这个气泡删除我们使用后端两个删除接口的 软删除，即更新产品状态。

代码语言：javascript复制

/* 接口product.ts新增软接口 */
export function apiProductRemove(id: number) {
  return axios.post(`/api/product/remove?id=${id}`);
}

/* 页面product/index.vue script部分新增确认事件处理 */
const removeButtonClick = async (id) => {
    const res = await apiProductRemove(id);
    if (res.code === 20000) {
        fetchData(); // 删除成功重新请求列表
    } else {
        console.log("产品删除失败");
    }
  }

案例验证下实现效果

在气泡确认组件使用建议中，有一种危险情况，比如数据彻底移出、操作会影响其他使用，这类是不建议使用Propconfirm，而是建议使用Modal并通过改变样式、按钮状态等来更明显的提醒和阻断操作。下面以另外一个彻底删除接口实现对话框的模式的确认删除交互。

因为上篇已经详细讲解了Modal组件使用，这里就直接给出参考的代码了。1）src/api/product.ts

代码语言：javascript复制

export function apiProductDelete(id: number) {
  return axios.delete('/api/product/delete', {
    params: {id}
  });
}

2）Vue tempplate

代码语言：javascript复制

<a-modal v-model:visible="delModalVisible"
           title="删除产品"
           @before-ok="delModalOk"
           okText="删除"
           :okButtonProps="modalOkPros"
  >
    <div>确定彻底删除此产品吗？</div>
  </a-modal>

3）Vue script

代码语言：javascript复制

// 控制删除确认对话框
const delModalVisible = ref(false); 
// 定义保存行删除的ID
const delId = ref("");
// 对话框确定按钮的自定义属性，按钮为警告类型
const modalOkPros = {
    status: 'warning'
    };
// 赋值并弹出对话框
const delBtnClick = (id) => {
    delId.value = id;
    delModalVisible.value = true;
};
// 调用接口执行删除操作
const delModalOk = async () => {
    const res = await apiProductRemove(delId.value);
    if (res.code === 20000) {
        delModalVisible.value = false;
        fetchData();
    } else {
        console.log("产品移除失败");
    };
};

2.表格Table 组件

在数据展示、分析整理、操作处理场景中最常用的就是Table表格，它是用行列的形式，结构化展示信息的组件；方便用户查看、分析数据。

2.1 组件构成

参考办公软件Excel在做数据表的时候（表头、行、列）格式，对应一个展示Table便有如下构成：

表头：说明这一列的信息类别，也可以在表头放置一些排序、筛选等操作按钮。
单元格 ：表格的主体由多个单元格组成，单元格内支持文字、图标、按钮、标签、单选框、复选框等元素。
行列分割线：从视觉上分隔信息。

< 组件用法 https://arco.design/docs/spec/table >

2.2 组件类型

作为数据展示最常用的组件，从样式来和使用场景来说，ArcoDesgin 提供了多种类型

基础表格 由表头和单元格组成，无其他拓展操作，对数据进行最基础展示；
固定表格 用于在固定表格重要行或列（一般为头和两边列）内容展示不全场景，出现滚动条可滑动预览；
选择表格 表格可以配置行的CheckBox，进行单选/多选方便进行批量的数据操作；
展开表格 表格行可以展开，以展示更多信息；
树表格 即嵌套表格，当数据信息有清晰的层级关系时，可以使用树表格。

<附之前已经实现基础表格图>

2.3 使用时机

何时使用

需要展示数据时：当有大量结构化数据需要展示展示时可以使用表格对数据进行有序的展示，更有利于用户对于数据的获取。
需要对数据进行复杂操作时：当需要对数据进行排序、搜索、筛选等操作时，可以使用表格组件，利于对数据进行操作。
需要对数据进行对比，归纳与分类时：当需要对数据进行对比、归纳、分类等操作时，可以使用表格组件，使信息之间易于对比，便于用户快速查询其中的差异与变化、关联和区别。

何时不适用