这是我参与8月更文挑战的第14天，活动详情查看：8月更文挑战
Table 组件大家肯定都不陌生，在进行数据展示和一部分页面布局的时候，Table 是不错的选择方案。这篇文章将使用 Vue3 打造一个简单的，用于数据展示的 Table 组件。
设计组件
打造组件切忌直接上手编码，做好组件的设计工作尤为重要，明确传入参数、触发事件和需要的插槽内容，是开发 Vue 组件的三大核心要素，接下来的这部分将介绍如何设计一个简单的 Table 组件。
props 参数
Table 组件用于展示的数据分为两部分——表头和表格数据，而且都是数组形式，方便使用v-for遍历渲染。于是得到了 props 参数如下。
props: {
cols: {type: Array,: () => {return []}}, // 表头
dataSource: {type: Array,: () => {return []}}, // 表格数据
},
Col 参数
针对表头，也就是表格列col的属性，我们希望不仅可以控制列的标题，还能对应的设置表格数据中对应的 key 值，以及可以自定展示用的作用域插槽scopedSlots。于是进一步设计 col 的属性如下。
title - {String} // 列标题
key - {String} // 对应 dataSource 中的键
scopedSlots - {Object} // 作用域插槽属性，"{customRender:xxx}"
组件的实现
渲染表头
表头部分较为简单，只需要循环渲染 cols 即可，直接上代码：
<thead>
<tr>
<th
v-for="(item, index) in cols"
:key="`table-thead-${index}`"
>
{{ item.title }}
</th>
</tr>
</thead>
渲染表格数据
渲染数据分为直接去 key 值渲染和自定义渲染 ，如果列中不存在scopedSlots属性，则直接通过点连接访问dataSource中的数据。
如果包含自定义渲染，则通过 slot 插槽形式，在模板中自定义展示数据。
<tr
v-for="(item, index) in dataSource"
:key="`table-tbody-tr-${index}`"
>
<td
v-for="(v, k) in cols"
:key="`table-tbody-td-${index}-${k}`"
>
<template v-if="!v.scopedSlots">{{ item[v.key] }}</template>
<!-- 自定义渲染 -->
<template v-else>
<slot
:name="v.scopedSlots.customRender"
:row="item"
:data="item[v.key]"
></slot>
</template>
</td>
</tr>
缺省提示
当没有数据的时候，总不能显示一个表头吧，孤零零的难免有点难看，那么只需要对空数据的情况进行一个判断并展示缺省提示即可。示例：
<!-- 空数据缺省展示 -->
<template v-if="dataSource.length == 0">
<tr class="table-empty-tr">
<td :colspan="cols.length">暂无数据</td>
</tr>
</template>
