说明

这一版封装的主要原因是当时有很多报表，数据列很多很多，基本在二十个左右。相应领导安排简洁代码，也为了偷懒，直接插槽循环搞起。其余是为了统一样式修改。

组件源码

<template><el-tablev-loading="loading"class="page-table":data="tableData":header-cell-style="headerCellStyle":highlight-current-row="highlightCurrentRow":height="propsHeight"row-key="id"ref="tableRef":border='border'><!-- 空状态显示 --><template slot="empty"><div class="empty-table"><i class="empty-icon el-icon-folder-opened" /><span class="empty-text">暂无数据</span></div></template><!-- 表格数据勾选、序号等 --><slot /><el-table-columnv-if="showIndex"label="序号"type="index"align="center"width="80"/><!-- 列数据渲染 --><template v-for="column in userColumn"><el-table-columnv-if="!column.hide":key="column.prop":label="column.label":prop="column.prop"align="center":sortable="column.sortable":width="column.width":min-width="column.minWidth"><template slot-scope="{row}"><!-- 针对每列数据都设置作用域插槽，便于自定义显示内容 --><slot:name="column.prop":row="row">{{ row[column.prop] }}</slot></template></el-table-column></template><!-- 操作列 --><slot name="operation" /></el-table>
</template>
<script>
export default {name: 'CustomTable',props: {tableData: { type: Array, default: () => [] },headerCellStyle: { type: Object, default: () => { } },highlightCurrentRow: { type: Boolean, default: false },loading: { type: Boolean, default: false },column: { type: Array, default: () => [] },showIndex: { type: Boolean, default: false },propsHeight: '',border: { type: Boolean, default: false }},data () {return {userColumn: []}},mounted () {if (this.column && this.column.length > 0) {this.userColumn = this.column} else {this.$message({type: 'error',message: '缺少列名信息'})return}},
}
</script>
<style lang="scss" scoped>.page-table {width: 100%;border: 1px solid #e3e3e3;border-bottom: none;border-radius: 4px;}.empty-table {text-align: center;padding: 56px 0 48px 0;.empty-icon {display: block;width: 75px;height: 57px;margin: 0px auto 0px auto;font-size: 67px;}}
}
</style>

重点说明

列数据配置

tableColumn: [ // 表格列数据{prop: 'stateNames',align: 'center',label: '阶段'},{prop: 'opinionsName',align: 'center',showOverflowTooltip: true,label: '意见内容'},{prop: 'operatorName',align: 'center',width: 150,label: '发布人'}
]

支持无数据插槽自定义和默认显示

<!-- 空状态显示 -->
<template slot="empty"><div class="empty-table"><i class="empty-icon el-icon-folder-opened" /><span class="empty-text">暂无数据</span></div>
</template>

列渲染

列循环渲染具名插槽。这样子方便某些列自定义显示内容格式，如：显示Tag标签、Switch开关、内容点击Click绑定等

<!-- 列数据渲染 -->
<template v-for="column in userColumn"><el-table-columnv-if="!column.hide"// XXX 列属性><template slot-scope="{row}"><!-- 针对每列数据都设置作用域插槽，便于自定义显示内容 --><slot:name="column.prop":row="row">{{ row[column.prop] }}</slot></template></el-table-column>
</template>

操作列

操作列的具名插槽。这里虽然是具名插槽，但并未给出作用域，因为此处并非是列！！！

<template slot="operation"><el-table-columnfixed="right"label="操作"align="center"width="200"><template slot-scope="{row}"><el-button@click="handleOperateData(row, 'detail')"type="text"size="small">查看</el-button><!-- 生效状态才可编辑 --><el-buttontype="text"size="small"@click="handleOperateData(row, 'edit')">编辑</el-button><el-buttontype="danger"size="small"@click="handleOperateData(row, 'delete')">删除</el-button></template></el-table-column>
</template>