vue 简单封装 table
<el-table
:data="tableData"
:span-method="spanMethod"
:summary-method="getSummaries"
:show-summary="hasMergeRowOrColumn"
:height="tableStyleParams.height"
:border="tableStyleParams.border"
:max-height="tableStyleParams.maxHeight"
style="width: 100%"
@row-click="handleRowClick"
>
<el-table-column align="center" :label="title">
<el-table-column
v-if="showIndex"
type="index"
width="70"
align="center"
label="序号"
/>
<template v-for="item of showTableColumn">
<el-table-column
v-if="item.type === 'slot'"
:key="item.name"
:align="item.align || 'center'"
:prop="item.prop"
:label="item.label"
:min-width="item.minWidth"
:width="item.width"
:show-overflow-tooltip="item.showTooltip || false"
>
<!-- 匿名插槽 -->
<!-- <template>
<slot></slot>
</template> -->
<!-- 具名插槽 -->
<!-- <template>
<slot :name="item.slotName"></slot>
</template> -->
<!-- 作用域 -->
<template slot-scope="{ row }">
<slot :name="item.slotName" :data="row" />
</template>
</el-table-column>
<el-table-column
v-else
:key="item.key"
:align="item.align || 'center'"
:prop="item.prop"
:label="item.label"
:show-overflow-tooltip="item.showTooltip || false"
>
<template slot-scope="scope">
<ex-slot v-if="item.render" :render="item.render" :row="scope.row" :index="scope.$index" :column="item" />
<span v-else>{{ scope.row[item.prop] || ' ' }}</span>
</template>
</el-table-column>
</template>
</el-table-column>
</el-table>