前端组件化设计——布局、逻辑、视图
一、拆分页面：将一个页面拆分成几个部分，如：父子包裹、左右或上下布局
<!-- 上下布局 --> <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次以上就不利于维护了）......
浙公网安备 33010602011771号