封装el-table并实现前端动态显隐列及操作列宽度自适应

项目场景：

在管理系统中，前端多用表格展示数据，而有些时候数据列会比较多，对于某些用户来说，有些数据列不必关注，则需要可以根据自己想要看的数据来改变表头列显示哪些隐藏哪些

我elementPlus用得多，因此便想对el-table进行简单封装，实现前端动态显隐列及操作列宽度自适应

在写前也参考过很多人的代码，但是很多都要额外传递参数，或者将数据组建成特定格式，很不方便；因此我此次封装希望少进行一些额外配置，力图还原el-table的用法

写得不好的地方多多见谅…

实现效果：

提示：先上个效果图，要是不符合大家想要的效果，可以及时看下一篇：

GIF图：

代码：

提示：下面是具体代码：

（1）组件代码

<template><el-table ref="tableRef" v-bind="$attrs":key="Math.random()"><template v-for="(item) in slotList"><component
                v-if="item.props != null && initialColumnList.some((col) => { return item.props.label == col.label && col.isShow == true })":is="item"></component></template><el-table-column align="center" label="操作" fixed="right":width="operateColumnWidth"><template #header><el-popover placement="bottom" popper-class="column-popover":width="200" trigger="hover"><template #reference><span>
                            操作
                            <el-icon><ArrowDownBold /></el-icon></span></template><el-checkbox class="column-checkgroup-item" v-model="showAllColumnFlag":indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox><el-divider /><el-checkbox class="column-checkgroup-item" v-for="(item) in initialColumnList"
                        v-model="item.isShow":label="item.label":key="item.label":disabled="item.label == '操作'"/></el-popover></template><template #default="scope"><div ref="operateItemGroup"><slot name="operate":scope="scope"/></div></template></el-table-column></el-table></template><script setup lang="ts">import{ RendererElement }from'vue'import{ ElTable }from'element-plus';const slots =useSlots()const slotList = ref<RendererElement[]>([])// 所有列,甚至包含注释const initialColumnList =ref([])// 正常列,排除注释内容const showAllColumnFlag =ref(true);const tableRef = ref<InstanceType<typeof ElTable>>()const operateItemGroup =ref()const emits =defineEmits(["getTableRef"]);// 用于多选constgetTableRef=()=>{emits('getTableRef', tableRef.value)}// 操作列宽度const operateColumnWidth =ref(0)// 动态设置操作列宽watch(()=> operateItemGroup.value,()=>{if(operateItemGroup.value){if(operateItemGroup.value.children.length==0){// 设置为0，el-table-column会自己设置一个默认宽度// 设置为1，目前会造成操作列基本不显示，即由于操作列处有可以选择哪些列不显示// 操作列不显示后，即没办法选择哪些列不显示
                operateColumnWidth.value =1;}else{
                operateColumnWidth.value = operateItemGroup.value.children.length *90;}}})onMounted(()=>{getTableRef();initSlotList();})// 初始化所有列constinitSlotList=()=>{if(slots.default){// el-table-column 使用时不传name 所以属于默认插槽
        slotList.value = slots.default()||[]// 语法initDynamicColumn()// 初始化动态列}}// 初始化动态列constinitDynamicColumn=()=>{
    slotList.value.map(item=>{const colProps = item.props
        // 存label，即表头名称，不存prop属性是因为，有些列使用插槽无需使用prop属性 if(colProps !=null&&typeof colProps ==='object'&& colProps.label){
            initialColumnList.value.push({label: colProps.label,isShow:true})}})
    initialColumnList.value.push({label:"操作",isShow:true})}// 列选中与半选的状态控制, 条件就是 当前选中的数据个数大于0 且 小于所有列的总数const isIndeterminate = computed<boolean>(()=>{const showColumnArray = initialColumnList.value.filter((item)=>{return item.isShow ==true});return showColumnArray.length >0&& showColumnArray.length < initialColumnList.value.length
})// 列全选与否的事件控制器consthandleCheckAllChange=(boolean: any)=>{if(boolean){// 全选 for(let i =0; i < initialColumnList.value.length; i++){
            initialColumnList.value[i].isShow =true;}}else{// 全不选for(let i =0; i < initialColumnList.value.length; i++){if(initialColumnList.value[i].label !="操作"){
                initialColumnList.value[i].isShow =false;}}}}</script><style scoped lang="scss"></style>

（2）父组件使用参考

<BPTable :data="firstTableData"  border stripe highlight-current-row><el-table-column type="index" label="序号" align="center" width="50"/><el-table-column property="name" align="center" label="菜单名称"/><el-table-column prop="remark" align="center" label="权限备注"/><!-- 操作列 --><template #operate="obj"><el-button v-perms="['sys:menu:update']" text icon="Edit" type="primary"
                    @click="openUpdateDialog(obj.scope.row)">
                    修改
                </el-button><el-button v-perms="['sys:menu:delete']" text icon="Delete" type="danger"
                    @click="openDeleteDialog(obj.scope.row.id)">
                    删除
                </el-button></template></BPTable>