vue如何封装一个elementUI的表格组件
灵活使用插槽slot实现表格封装
插槽能够实现对内容的分发，但是像elementUI中多个插槽并没有使用具名插槽是如何实现对多个默认插槽处理的，这里就来分享一下经验。
slot插槽默认插槽
首先多个默认插槽，this.$slots中是一个以defaul为key的数组。这样我们就能利用数组来处理多个默认插槽了。
这是我们默认elementUI实现的一个表格父组件和列子组件。
我们看到 一个 el-table中含有三个 el-table-column 子组件，这时候，实际上这三个子组件就是el-table的插槽，并且都是没有具名。
三列插槽组件，我们要实现对表格头部的渲染，从中提取 label作为 thead中th的内容。
ElTable.vue 中代码代码示例：
<thead>
<tr>
<slot></slot>
</tr>
</thead>
这里就是讲这三列渲染到表格头部的th中。
El-Table-Column中代码示例
<th v-else :width="width">{
{label}}</th>
这样我们就能实现对表格头部渲染了。
如何渲染数据
数据是传递给父组件el-table那么数据肯定是在el-table中完成渲染。
<tbody>
<tr v-for="item in data" :key="item.id">
<template v-for="val in slots['default']()" :key="val">
<td>{
{item[val.props.prop]}}</td>
</template>
</tr>
</tbody>
我们看以上代码，其中slots即为 vue 3.2版本中获取页面所有slot的useSlots写法。这里面有一个default的插槽数据。
其中每一项数据格式大概如下：
{
"props": {
"prop": "id"
},
"children": { "_": 1 },
"key": null,
"ref": null,
}
**注意其中如果el-table-column中如果含有插槽，这children为 {“_”: 1}，
可以看到其中有一个props属性，里面有一个prop属性指向id，这样我们就能遍历这数据拿到其中对应的数据了，如下。
{
{item[val.props.prop]}}
以上代码即可实现一个仿elementUI的table组件的数据渲染工作。
接下来我们实现对数据的自定义展示。
<el-table-column props="name" label="标题" width="200">
<template #default="scope">
<a href="/">{
{scope && scope.row.name}}</a>
</template>
</el-table-column>
如上代码我们看到要是想对name字段数据进行一个a标签包裹。这里其实有一个插槽，即在el-table-colun插槽中再次嵌入插槽，这里面要实现数据传递。
我们利用component内置组件配合:is动态属性是想对el-table-column插槽的复用，这样我们就可以在tbody渲染中，拿到el-table-column插槽的内容。
对于区分有插槽和没哟插槽的el-table-column组件，我们采用上面提到的children属性来实现。
<tbody>
<tr v-for="item in data" :key="item.id">
<template v-for="val in slots['default']()" :key="val">
<template v-if="val && val.children">
<td>
<component :is="val" :scope="item" :prop="val.props.prop"></component>
</td>
</template>
<template v-else>
<td>
<component :is="val" :scope="item"></component>
</td>
</template>
</template>
</tr>
</tbody>
以上代码我们就实现了对有无插槽的el-table-column的区分。通过传递不同参数来实现对不同数据的渲染。
ElTable组件的渲染。
表格自定义列的内容渲染
现在我们看到表格中所有具体内容都是在el-table-column中展示出来的，该组件承担了三部分功能，即表头th列的渲染，表格主体中有插槽和没有插槽内容的渲染。所以要区分三种情况来处理。
1 没有传递数据列的渲染
表格thead部分是不需要传递数据的，仅展示label使用。所以这部分很容易区分。
2 有数据的情况要根据是否传递prop属性来判断是简单展示还是需要自定义处理。
这样我们就完成了整个自定义表格组件的代码。
其中数据的传递，我们看到行数据是在el-table中完成的数据绑定，自定义列内容数据外暴露是在el-table-column中完成的，在根组件下通过<template #default=“scope”>默认插槽完成的。
如有其它不同意见可以留言讨论。