[if !supportLists]一、[endif]表单：
1、常用属性说明
（1）、:inline="true"行内表单模式：每个el-form-item横排
（2）、:rules="outLibRule"定义校验规则，例如必填
（3）、label-position="top"表单域标签的位置为top
（4）、:model=”workForm”表单绑定数据源
（5）、表单中el-form-item标签行间距，默认行间距比较大，margin-bottom: 20px;
.el-form-item {margin-bottom: 3px;}
2、常用校验注意问题
（1）、trigger: 'blur'和trigger: 'change'使用时注意。
3、自定义校验：
[if !supportLists]（1）[endif]、input框位数限制，在中使用，
例如：即限制最大input框输入为3.
[if !supportLists]（2）[endif]、为了便于统一管理，自定义的校验均定义到src/common/js/validate.js中，
[if !supportLists]（3）[endif]、自定义校验一定要有callback();回调函数，vlaue一般为字符串类型的
使用时引用如下
import { checkBoxNum } from '@/common/js/validate';即可使用。
4、form表单数据情清空容易遇到的问题
（1）、
（2）、清除form表单中的数据，需要在 每个要想被清除内容的小组件上注意写prop=”…”
（3）、 this.$refs[formName].resetFields();
二、表格
1、常用属性说明
[if !supportLists]（1）[endif]、ref为引用
[if !supportLists]（2）[endif]、:row-class-name行样式处理函数
2、自定义模板
（1）、usedNum为数据源里面的字段
[if !supportLists]（2）[endif]、字典对应
[if !supportLists]a、[endif]引入字典import { OUT_LIBARY_FLAG } from '@/common/js/dict';
[if !supportLists]b、[endif]声明字典
c、使用字典
3、表格中根据特殊条件做行样式处理：例如：标红显示
[if !supportLists]（1）[endif]、定义函数
[if !supportLists]（2）[endif]、根据条件做样式处理
[if !supportLists]（3）[endif]、css样式定义
[if !supportLists]4、[endif]表格勾选的样式处理。
（1）、全选处理函数：select-all
（2）、去除勾选this.$refs.multipleTable.clearSelection();其中multipleTable为表格绑定的数据源的引用ref=”multipleTable”。
（3）、满足某一条件不可勾选 :selectable="handleDisSel"
[if !supportLists]三、[endif]弹出框
1、设置dialog框大小
[if !supportLists]（1）[endif]、默认设置：size=”small/large/tiny”
[if !supportLists]（2）[endif]、自定义设置：.el-dialog--small {width: 600px;}注意：需要在css里面加入scoped
[if !supportLists]2、[endif]自定义设置footer
[if !supportLists]四、[endif]过滤
[if !supportLists]a、[endif]统一放在src/common/js/filters.js里面；
[if !supportLists]b、[endif]引入所需要的过滤：import { ymd, splitNum, limitName, specialLength } from '@/common/js/filters';；
c、在filter中声明：filters: {splitNum,ymd,limitName,specialLength}, 。
[if !supportLists]1、[endif]时间戳过滤
[if !supportLists]（1）[endif]、提供dd/MM/yyyy格式过滤的ymd和dd/MM/yyyy h:m:s格式的ymd2过滤方式。
[if !supportLists]（2）[endif]表格自定义模板中使用：{{ scope.row.purseTime | ymd}}
[if !supportLists]（3）[endif]Input输入框中过滤：
[if !supportLists]2、[endif]数字过滤
[if !supportLists]（1）[endif]、将1000过滤成1,000 使用splitNum，使用时：{{scope.row.remainNum | splitNum}}
[if !supportLists]3、[endif]序列号分割
[if !supportLists]（1）[endif]、过滤过长的序列号：limitBoxNum
[if !supportLists]4、[endif]分割采集点：limitCollection
[if !supportLists]5、[endif]分割地址：limitAddres。
五、页面设计规范
[if !supportLists]1、[endif]在src/common/styles/vars.scss文件中，页面统一高度设置，每个页面直接引入该样式。
[if !supportLists]2、[endif]提示信息设置
[if !supportLists]3、[endif]dialog框设置
[if !supportLists]（1）[endif]、内容项较少时放在dialog框内，说明和内容上下排列。
（2）、dialog框内容过多时，用页面跳转实现。
[if !supportLists]4、[endif]宽度、高度设置
[if !supportLists]（1）[endif]、放在导航栏操作按钮：少于7个字的宽度都设置为100px。
[if !supportLists]（2）[endif]、导航栏文本字体样式设计style="font-size:20px;color:#20A0FF;"。
（3）、表格: 列表中序号和勾选框的宽度都为:width="80px"
（4）、dialog框，一般采用size=”small”，字体大小采用默认字体。
（5）、输入框宽度一般设置为width=”220px”
（6）、表格列表数据项过多时采用过滤，只保留一部分，鼠标浮上去全部展示在鼠标上面。
[if !supportLists]5、[endif]分页设置
（1）、页面设置
（2）、声明
（3）、点击分页调整
六、页面数据传输
[if !supportLists]1、[endif]页面间通过sessionStorage传送数据（json字符串）。例如
（1）、将所要传送的value，并将其转为json字符串缓存，即：sessionStorage.setItem('workerForm', JSON.stringify(value));
（2）、页面中获取value，即：sessionStorage.getItem('workerForm')
2、vuejs中跨页面传递数据（只传id）
（1）、路由传id：this.$router.push(`/web/inspector/${value.jobId}`);（反引号）
（2）、index.js里面path后面加/:id（传id）
（3）、页面接收id：this.$route.params.id
3、前端与后端数据传输
（1）、在src/common/api/makeManage/productionRecordSearch.js中声明接口。
如下所示：url都使用小写
（2）、在需要与后台交互引入该接口
import { list } from '@/common/api/makeManage/productionRecordSearch';
（3）、使用先封装参数
（4）、查询与分页
网友评论