持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情
写在前面的话
上篇文章讲解了关于element-ui的table组件的二次封装，但只完成了基本功能。本文讲完成其他的功能。
本项目基于vue3.0+ts,基于element-ui
功能开发
多选功能
在父组件配置项数据中定义一个selection选项标志是否展示多选。
子组件对其进行判断后展示一列多选框列表，后再增加一个selection-change事件，当选中触发，则提交给业务组件。开发如下：
子组件：
父组件:
自定义列模板
表格中不仅需要涉及到普通数据展示，也可能存在需要自定义列模板的情况。我们可以通过slot插槽的方式实现
首先在业务组件的配置项数据结构增加一个type字段表示自定列模板的情况，可定义为“slot”，再增加一个slot_name的字段，定义插槽名。
业务组件模板代码如下：
子组件对应代码如下：
展开行
关于展开行的开发同自定义列表的功能开发是一致的，也是利用插槽即可实现。在业务组件的配置项数据定义type为expand，在自定义一个slot_name，然后在子组件中判断expand后展示展开行即可。
业务组件：
子组件：
是否展示序号，是否展示边框，斑马纹等
这些配置起来就更简单了，只需要在父组件传入时定义好，然后子组件接收，并做好判断展示即可。
父组件开发
子组件：
其他的如是否排序，是否需要加状态均同理。
table组件代码
<template>
<el-table
:data="data" style="width: 100%"
:stripe="stripe"
:border="border"
@selection-change="handleSelectionChange"
>
<el-table-column v-if="selection" type="selection" width="55" />
<el-table-column v-if="index" type="index"/>
<template v-for="(item) in form" :key="item.props">
<el-table-column v-if="item.type=='slot'"
:prop="item.props"
:label="item.label"
:width="item.width?item.width:''"
:sortable="item.sortable" >
<template #default="scope">
<slot :name="item.slot_name" :data="scope.row"></slot>
</template>
</el-table-column>
<el-table-column v-else-if="item.type=='expand'"
type="expand"
:prop="item.props"
:label="item.label"
:width="item.width?item.width:''"
:sortable="item.sortable" >
<template #default="props">
<slot :name="item.slot_name" :data="props.row"></slot>
</template>
</el-table-column>
<el-table-column v-else
:prop="item.props"
:label="item.label"
:width="item.width?item.width:''"/>
</template>
</el-table>
</template>
<script setup>
import {defineProps,defineEmits} from "vue";
const props=defineProps({
form: Array, // 表格数据结构：props:prop字段，label:label字段,type类型区分('slot':自定义插槽，'expand':展开行),slot_name:当type有值时的插槽名，sortable:是否排序
data:Array, //数据源
stripe:Boolean, //是否需要斑马纹，默认否
border:Boolean,//是否需要边框，默认否
selection:Boolean,//是否需要多选，默认否
index:Boolean//是否需要排序，默认否
});
const emit = defineEmits(['multipleSelection'])
//多选触发
const handleSelectionChange = (val) => {
emit('multipleSelection',val);
}
console.log(props.form)
</script>
总结
自此，一个基于element-ui的table组件的二次封装基本完成，在开发中需要涉及的功能大概也就这些，其他的思想也是大同小异。
