1.封装el-table组件代码,可直接复制使用
<template>
<div class="table">
<el-table v-loading="loading" :data="dataSource"
ref="mutipleTable"
:header-cell-style="{'text-align':'center'}"
border
@selection-change="handleSelectionChange"
:class="tableHead?'':'no-table-head'">
<!--region 选择框-->
<el-table-column v-if="options.mutiSelect" type="selection" style="width: 55px;">
</el-table-column>
<!--endregion-->
<!--region 数据列-->
<template v-for="(column, index) in columns">
<el-table-column v-if="column.type == 'index'"
:key="index"
type="index"
:label="column.label"
:align="column.align"
:width="column.width"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column :prop="column.prop"
:key='column.label'
:label="column.label"
:align="column.align"
:width="column.width"
v-else
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<template v-if="!column.render">
<template v-if="column.formatter">
<span v-html="column.formatter(scope.row, column)"></span>
</template>
<template v-else>
<span>{
{
scope.row[column.prop]}}</span>
</template>
</template>
<template v-else>
<expand-dom :column="column" :cc="scope" :row="scope.row" :render="column.render" :index="index"></expand-dom>
</template>
</template>
</el-table-column>
</template>
<!--endregion-->
<!--region 按钮操作组-->
<el-table-column ref="fixedColumn" label="操作" :align="operates.align?operates.align:'center'" :width="operates.width" :fixed="operates.fixed"
v-if="operates.list.length">
<template slot-scope="scope">
<div class="operate-group">
<template v-for="(column,index) in operates.list">
<expand-dom :column="column" :row="scope.row" :render="column.render" :index="index"></expand-dom>
</template>
</div>
</template>
</el-table-column>
</el-table>
<div class="total" v-if="total > 0">
<span>共计</span><span class="count">{
{
total}}</span><span>条数据</span>
</div>
<div class="pager custom-pagination">
<button