如何封装一个健壮性的table组件

公司做后台业务的肯定是避免不了tree、table、分页各种功能，业务逻辑又大致相似，所以就萌生一个自己封装一个组件的想法。

需求分析

    组件要求

        - 可设置单元格宽度

        - 可选择多条数据selection

        - 静态数据格式的转换

        - 单元格可支持基础组件的编辑修改

        - 保留多个或至少一个外部插槽

        - 支持分页数据

基础代码

/**   
* @params 表格静态配置字段   
*  prop: 显示的字段   
*  label：表头文字   
*  width: cell宽度   
*  onClick：单元格是否可点击   
*  handlerValue：格式化内容 比如 时间格式   
*  showOverflowTooltip：内容超出 鼠标移入显示 tip   
*  tableSelection: 是否需要多选框   
*  isComponent: 是否组件   
*  componentName: 组件名称   
* @params 配置示例   
*  label: "名称",   
*  prop: "name",   
*  width: 74,   
*  isComponent: true,  //是否显示组件   
*  componentName: 'checkbox',  // 组件名称   
*  handlerValue: (value) => 转换成自己想要的数据结构   
*  onClick: 'handleEditCellChange',  //组件触发事件   
*/   
<el-table      
    border      
    :data="tableData"      
    @selection-change="handleSelectionChange"      
    :header-cell-style="{'font-size': '16px'}"      
    style="width: 100%">      
    <el-table-column v-if="tableSelection" type="selection" width="60">
    </el-table-column>      
    <el-table-column        
    v-for="(item,index) in tableColumns"        
    :show-overflow-tooltip="item.showOverflowTooltip"        
    :key="index"        
    :prop="item.prop"        
    :label="item.label"        
    :width="item.width">        
    <template slot-scope="scope">          
        <component 
            v-if="item.isComponent" 
            :is="`el-${item.componentName}`" 
            @change="
            $emit(item.onClick, 
            {index: scope.$index, row: scope.row, prop: 
            item.prop})" 
            v-model="scope.row[item.prop]">
        </component>          
        <span v-else>{{item.handlerValue? 
            item.handlerValue(scope.row[item.prop]):scope.row[item.prop]}}
        </span>        
     </template>      
   </el-table-column>      
   <slot name="edit"></slot>    
</el-table>     
import { PageObj } from '@/components/staticConfig'  
export default {    
    props: {      
        // 数据源      
        tableData: {        
            type: Array,        
            default: () => []      
        },      
        total: {        
            type: Number,        
            default: 0      
        },      
        currentPage: {        
            type: Number,        
            default: 1     
        },      
        pageSize: {        
            type: Number,        
            default: 10      
        },      
        // 是否显示多选条件      
        tableSelection: {        
            type: Boolean,        
            default: () => false      
        },      
        // 配置 json      
        tableColumns: {        
            type: Array,        
            default: () => []      
        }    
    },    
    data(){      
        return {        
            PageObj: PageObj,      
        }    
    },    
    methods: {     
        handleSizeChange(size){        
            this.$emit('handleSize', size)      
        },     
        handleCurrentChange(page){        
            this.$emit('handleCurrent', page)      
        },      
        // 多选条件触发      
        handleSelectionChange(val){        
            this.$emit('handleSelectionChange', val)      
        }    
    }  
}

使用示例

<TemplateTable   
    :tableSelection="tableSelection"   
    :tableColumns="tableColumns"    
    :tableData="tableData"   
    :currentPage="currentPage"   
    :pageSize="pageSize"   
    :total="total"   
    @handleCurrent="handleCurrent"   
    @handleSelectionChange="handleSelectionChange"   
    @handleEditCellChange="handleEditCellChange"   
    @handleSize="handleSize">   
    <el-table-column label="操作" slot="edit" width="200">     
    // 插槽的保留      
        <template slot-scope="scope">        
            <el-button 
                size="mini" 
                type="text" 
                icon="el-icon-edit"  
                @click="updateItem(scope.row)">修改</el-button>
        </template>    
    </el-table-column> 
</TemplateTable>

全文总结

健壮性： 代码简洁易读性，后期增加其他编辑组件更方便

功能也许不是最完善的，基本上也涵盖了大部分的业务基础功能

看完觉得对你有帮助的话，点个关注支持一下

也可以留下你宝贵的意见一起探讨一下优化方案