Vue+Element 封装表格组件
场景：
web项目开发离不开表格数据展示，还有其他定制化的样式及功能
如果每个页面都直接使用组件库的表格，会使项目代码过于臃肿
于是，封装一个表格组件，全局挂载，页面组件直接使用即可
实现：
vue2:
表格子组件：
<template><div><!-- 封装表格 --><el-table :data="tableData" @selection-change="selectionChange" :show-summary="showSummary" :sum-text="sumText" :stripe="isStripe"border fit :summary-method="getSummaries" :max-height="maxHeight" style="width: 100%" v-loading="isLoading"><!-- 表头 --><template v-for="item in tableHead"><!-- 序号 --><el-table-column v-if="item.type && item.type=='index'" :label="item.label" :key="item.type" :type="item.type" align="center"header-align="center" width="50px"></el-table-column><!-- 复选框 --><el-table-column v-if="item.type && item.type=='selection'" fit="true" :key="item.type" :type="item.type" align="center"header-align="center" :filter-multiple="true"></el-table-column><!-- 操作列 --><el-table-column v-if="item.prop == 'operation'" fit="true" :key="item.label" :label="item.label" :prop="item.prop" align="center"header-align="center" :filter-multiple="true" :width="item.width || '150'"><template slot-scope="{row}"><div class="btns_div"><el-link v-for="i in item.list" :key="i.prop" :type="i.lineType && i.lineType(row)" @click="i.handlerFn(row, i.prop)" :disabled="i.flagDisabledFn && i.flagDisabledFn(row)">{{ (i.handlerLabel && i.handlerLabel(row)) || i.label}}</el-link></div></template></el-table-column><!-- 数据列 --><el-table-column v-if="item.prop != 'operation' && item.type!='selection' && item.type!='index'" fit="true" :key="item.label":label="item.label" :prop="item.prop" align="center" header-align="center" :filter-multiple="true" show-overflow-tooltip:min-width="item.minWidth || '150'"><!-- 表头内容：优先使用外部插槽，其次用默认提示信息 --><template slot="header"><!-- 外部自定义表头插槽 --><template v-if="item.slotName"><slot :name="`header_${item.slotName}`" :item="item"></slot></template><!-- 默认表头 --><template v-else><span>{{ item.label }}</span></template></template><!-- 数据展示 --><template slot-scope="{row}"><!-- 使用自定义插槽（如果配置了slotName） --><template v-if="item.slotName"><!-- 动态插槽名称：使用item.slotName，方便外部传入自定义内容 --><slot :name="item.slotName" :row="row"></slot></template><!-- 特殊数据处理 --><span v-if="item.formatData">{{item.formatData(row) }}</span><!-- 不用处理的数据 --><span v-else>{{row[item.prop]}}</span></template></el-table-column></template></el-table>