谈谈如何优雅地封装 el-table

效果

像这样的表格我们可以这样划分一下区域：

• 1区域的渲染是通过取反插槽的条件 
• 2区域的渲染是写在 slot 插槽的内部的，直接显示行数据
• 3区域的渲染是通过具名插槽 bind 渲染

直接上代码：

子组件：

<template>   <el-table v-loading="loading" border stripe :data="props.data">     <template v-for="column in props.columns" :key="column.id">       <el-table-column         :label="column.label"         :align="column.align"         :type="column.type"         :width="column.width"         :prop="column.prop"       >         <template v-if="column.type !== 'index'" #default="scope">           <slot :name="`default.${column.prop}`" v-bind="scope">             {{ scope.row[column.prop] }}           </slot>         </template>       </el-table-column>     </template>   </el-table> </template>  <script lang="ts" setup> interface TablePropsItem {   id: number;   label: string;   prop: string;   width: string;   align: 'left' | 'center' | 'right';   type: 'default' | 'index' | 'selection' | 'expand';   options?: any[]; }  interface TableProps {   columns: TablePropsItem[];   data: any[];   loading: boolean; }  const props = defineProps<TableProps>(); </script> 

父组件：

    <CustomTable       :loading="tableLoading"       :data="tableData"       :columns="tableColumns"     >       <!-- 是否通过 -->       <template #default.status="{ row }">         <el-tag :type="getStatusTagType(row.status)">           {{ getStatusLabel(row.status) }}         </el-tag>       </template>       <!-- 操作 -->       <template #default.operate="{ row }">         <el-button           :disabled="disabledBtnStatus(row)"           size="small"           @click="handleEmailSend(true)"         >           批准         </el-button>         <el-button           :disabled="disabledBtnStatus(row)"           size="small"           type="danger"           @click="handleEmailSend(false)"         >           拒绝         </el-button>       </template>     </CustomTable>

const tableColumns = [   { id: 0, type: 'index', align: 'center', width: '55' },   { id: 1, label: '姓名', prop: 'name' },   { id: 2, label: '学号', prop: 'studentId' },   { id: 3, label: '邮箱', prop: 'email' },   { id: 4, label: '专业', prop: 'profession' },   { id: 5, label: '意愿部门', prop: 'department' },   { id: 6, label: '自我介绍', prop: 'introduction', width: '200' },   { id: 7, label: '是否通过', prop: 'status', type: 'tag' },   { id: 8, label: '操作', prop: 'operate', width: '180' } ];   // 注意观察 // 1. 子组件的 `default.${column.prop}` // 2. 父组件的 #default.operate="{ row }" // 3. 数据的 prop 的属性值

就这么简单！其他功能自行拓展即可，欢迎三连，谢谢