一、拆分页面：将一个页面拆分成几个部分，如：父子包裹、左右或上下布局
<!-- 上下布局 -->
<template>
<el-card
style="background: #fff;min-height: 800px"
shadow="never">
<div
slot="header"
style="height: 28px">
<!-- 标题 -->
<span>xxxx列表<span/>
</div>
<!--内容-->
<div>
<featureTable :parameters="parameters"/>
</div>
</el-card>
</template>二、表格操作部分，属于中间件——处理复杂逻辑、数据转换
1.纯展示的表格
<template>
<el-card id="activityManage">
<div slot="header">
<el-button
type="primary"
@click="addRowDialog"
>新建</el-button>
</div>
<el-row >
<el-col>
<CommonTable
:table-data="tableData"
:table-column="tableColumn"
height="680"
:loading="listLoading"
>
<el-table-column
type="index"
label="序号"
align="center"
width="60"
slot="header">
<template slot-scope="scope">
{{ (currentPage-1)*pageSize+scope.$index+1 }}
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="150"
slot="footer">
<template slot-scope="scope">
<el-button-group>
<el-button
type="primary"
@click="editRowDialog(scope.$index, scope.row)">编辑</el-button>
<el-button
type="danger"
@click="deleteRowDialog(scope.$index, scope.row)">删除</el-button>
</el-button-group>
</template>
</el-table-column>
</CommonTable>
<!-- 分页 -->
<Pagination
style="margin-top:20px"
:table-begin="tableBeigin"
@changTable="getTablePage"/>
<!-- 2.对话框 -->
<el-dialog
top='60px'
:title="dialogTitle"
:visible.sync="dialogVisible"
:width="dialogWidth"
:close-on-click-modal="false"
:show-close="!showCancelButton"
>
<component
:is='componentType'
:show-btn='showCancelButton'
:form-info='formInfo'
@form-change='hanldeFormChange'
/>
</el-dialog>
</el-row>
</el-card>
</template>2.复杂的内容需要自定义
<template>
<div>
<!-- 新建+搜索 -->
<el-row>
<el-col :span="4">
<el-button
type="primary"
@click="featureNew"
>新建xxx</el-button>
</el-col>
<el-col
:span="4"
:offset="parameters.privatePage==='个人'?16:20">
<el-input
v-model="searchInfo"
placeholder="关键字搜索"
clearable
@clear="searchInfoMatch"
@keyup.enter.native="searchInfoMatch(searchInfo)">
<el-button
slot="append"
icon="el-icon-search"
@click="searchInfoMatch(searchInfo)"/>
</el-input>
</el-col>
</el-row>
<!-- 自定义表格合并 -->
<el-table
style='margin-top:20px'
v-loading="parameters.loading"
:data="tableData"
border
:span-method="colspanMethod"
>
<el-table-column
show-overflow-tooltip
width="120"
align="center"
prop="type"
label="xx分类"
/>
<!--操作-->
<el-table-column
align="center"
label="操作"
width="200">
<template slot-scope="scope">
<el-button-group>
<el-button
@click="tableRowChange(scope, 'edit')"
type="primary"
:disabled="scope.row.app_id===''">查看编辑</el-button>
</el-button-group>
<el-dropdown
trigger="click">
<el-button type="primary">
更多<i class="el-icon-arrow-down el-icon--right"/>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
style="padding:0"
v-for="(item,index) in tableRowMore"
:key='index'>
<el-button
style="padding: 7px 15px;width:100%"
@click="tableRowChange(scope, item.action)"
type="text"
:disabled="scope.row.app_id===''">{{ item.name }}</el-button>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<el-pagination
style="margin-top: 15px"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageTotal"/>
<!-- 2.对话框 -->
<el-dialog
top='60px'
:title="dialogTitle"
:visible.sync="dialogVisible"
:width="dialogWidth"
:close-on-click-modal="false"
:show-close="!showCancelButton"
>
xxx表单内容xxx
<span slot="footer">
<el-button
@click="handleClose('ruleForm')">取消</el-button>
<el-button
type="primary"
@click="submitNewActivity('ruleForm')">确定</el-button>
</span>
</el-dialog>
</template>三、展示组件：
比如通用表格组件、搜索框组件、分页组件、表单校验组件（如果大于1个使用component组件动态切换）、按钮弹框（放大编辑）、通用的编辑器组件、可视化图形组件等，当然通用的函数、数据配置等也可以抽离出来，或者使用第三方库实现：
import CommonTable from 'module-comp/table/CommonTable'import _ from 'lodash' // 第三方库
import {getSpanArr} from '@/utils/xxxManage'// 公共的方法或数据配置
import canvasInstanceStatus from 'mixins/xxxStatus'// 插入实现方法，比较隐晦不好维护mixins:[xxx]
import Pagination from './Pagination'// 通用的分页组件或自定义需要的内容化繁为简:
比如上面的表格操作比较繁琐，使用数组遍历输出菜单，设置通用的方法调用（设置一个type区分）；
又如：表格输出列自适应时，标题也可以设置成一个数组格式，通过遍历的形式进行输出，示例在下面；
<el-table
:max-height="height"
ref="commonTable"
:data="tableData"
:size="size"
:stripe="stripe"
border
highlight-current-row
v-loading="loading"
:row-class-name="tableRowClassName"
@filter-change="filterChange"
@selection-change="handleSelectionChange"
:row-key="rowKey"
>
<!--自定义插入-->
<slot name="header"/>
<el-table-column
v-for="(item, index) in tableColumn"
:key="`key_${index}`"
:prop="item.prop"
:label="item.label"
show-overflow-tooltip
:sortable='sortable'
align="center"
>
<template slot-scope="scope">
<div v-if="tableColumn[index].prop === 'field_key'">
<span>{{ keyOptionsObj[scope.row.field_key] }}</span>
</div>
<div v-else>
<span>{{ scope.row[tableColumn[index].prop] }}</span>
</div>
</template>
</el-table-column>
<!--自定义插入-->
<slot name="footer"/>
</el-table>
需要注意的问题：组件的通讯问题，通常组件需要进行联动效果，这需要注意传值的技巧（只传一个对象）、以及回调方法尽量设置到中间件（连续回调2次以上就不利于维护了）......
来源：oschina
链接：https://my.oschina.net/u/4419355/blog/3452007