vuejs前端页面开发总结

1、一、表单：1、常用属性说明<el-form :model=l,workerform11 :inline=htnue" ref=uworkerform'1 : rules二"outlibrule'1 |class="stan dard11 label-positi on=l,top,>(x):inline="true"行内表单模式：每个屉m横排(2) 、：厂川亡ubru仏"定义校验规则，例如必填(3) 、label-'positioi="top"表单域标签的位置为亡op(4) :m

2、o6/e/=nworkform, 表单绑定数据源(5) 、表单中el-form-item标签行间距，默认行间距比较大，marginbottom: 20px; el-form-item margin-bottom: 3px;2、常用校验注意问题(1) 、trigger: 'blur'h trigger: 'change'使用时注意。3、自定义校验：(1) input框位数限制，在el-input中使用，例如:el-input :maxlength="3"即限制最大input框输入为3.(2) 、为了便于统一管理，口定义的校验均定义到src/co

3、mmon/js/validate.js中，(3) 、自定义校验一定要有callback();回调函数，vlaue 般为字符串类型的const checkboxnum = (ruls, value, callback) => settimeout() => if (lvalue) callback(new error(1出库盒数不能为空')；if (value * 200 > ruls.maxvalue() callback(new error('岀库数量不得大于当前系统库存量');if (!number.isinteger(value * 1) cal

4、lback(new error(1请输入一个整数')； else if (value < 0 | value > 50) callback(new error('岀库盒数不得大于50盒')； else callback();export maxvalue minvalue， checknum, x checkboxnum ；使用吋引用如下import checkboxnum from '/common/js/validate'即可使用。4、form表单数据情清空容易遇到的问题(1) 、<el-form :model="erro

5、raddform" ref="erroraddform" >(2) 、清除form表单屮的数据，需要在 每个要想被清除内容的小组件上注意写prop=”(3) 、 this.$refsformname.resetfields();二、表格1、常用属性说明<el-table :data=l,blankcardh ref=l,multipletable,' border select=,handleselection" selectionchangg=”handleselchangg” style二"width:100%; i:r

6、ow-classname="tablerowclassname”>(1) > ref为引用(2) > :row-class-name y样式处理函数2、自定义模板(1) 、usednum为数据源里面的字段<el-table-column label=h盒数” width=,l80pxm><template slot-scope=”scope"><p>scope> row.usednum/scope.row.maxnum</p> </templa</el-table-column>(2)

7、 、字典对应a、引入字典 import out_libary_flag from '/common/js/dict'b、声明字典outlibflag： out_libary_flagjc、使用字典<el-table-column prop=l,permitoutlibflag,1 width=,l80px" label=,f是否可以出库"><template slot-scope=,scope,>outlibflag scoperow.permitoutlibflag</templa</etable-column>3

8、、表格屮根据特殊条件做行样式处理：例如：标红显示(1) 、定义函数<el-table :data=,blankcard,' border style="width: 100%;11 : row-class-name="tablerowclassname11 >(2) 、根据条件做样式处理tablerowclassname(row) let today = new date();let yesterday = new date(today - 1000 * 60 * 60 * 24);if (row.unreturnednum = 0) return 1

9、info-row1; else if (row.unreturnednum > 0 && row.lastupdatetime < yesterday.gettime() return 'positive-row1;return(3) . css样式定义 :l厂0司 t>a c icgloui n d : 甘 el - "table positive low bm u rgrou n d : #f f fauo;4、表格勾选的样式处理。(1) 、全选处理函数：select-all(2) 、去除勾选 this.$refs.multipletab

10、le.clearselection();其中 multipletable 为表格绑定的 数据源的引用 ref二"multipletable"。(3) 、满足某一条件不可勾选:selectable="handledissel"<el-table-column width=w80pxm type=hselectionm :selectable=,handledissel" :min=,ln :max="l,>handledissel(row) i-f (row.pursenum = row storsgenum) return

11、 false; else return 七rue;三、弹出框设置dialog框大小(1) 、默认设置:size=wsma i l/la rge/ti nyw(2) 、自定义设置：.el-dialog-small width: 600px;注意：需要在 css 里面加入 scoped2、自定义设置footer<div slot=,footerh class=hdialogrighdialog-rightaion"><el-button style=mwidth: 100px;m type="primary,t click=hsubmitlib( 'f

12、orm')">确定</el-button> <el-button style=hwidth:100px;m click=mdialogformvisible = falsem>取消</el-button></div>四、过滤a 统一放在 src/common/js/filters.js 里面；b、引入所需要的过滤:import ymd, splitnum, limitname, speciallength from '/common/js/filters'；c、在 filter 中声明:filters: s

13、plitnum,ymd,limitname,speciallength,。1、时间戳过滤(1) >提供dd/mm/yyyy格式过滤的ymd和dd/mm/yyyy h:m:s格式的ymd2过滤方式。(2) 表格自定义模板中使用: scope.row.pursetime | ymd(3) input 输入框中过滤:<el-input:value="new date() | ymd" readonlyx/el-input>2、数字过滤(1)、将 1000 过滤成 1,000 使用 splitnum,使用时:scope.row.remainnum | splitn

14、um3序列号分割(1) >过滤过长的序列号：limitboxnum4、分割采集点:limitcollection5 分割地址：limitaddres。五、页面设计规范在src/common/styles/vars.scss文件屮，页而统一高度设置，每个页面直接引入该样式。 standard-heigh七 wid七h : au-toj| heigh七：587pxj f on 七-sine: 14pxjktempla<div class="standard-hei呂ht”> <section>2、提示信息设置this.$notify（message :

15、9;请选择条i己录 ！'丄 type:'warning'»duration: 1000）；3、dialog框设置(1)、内容项较少时放在dialog框内，说明和内容上下排列。岀库曰期:18/12/2017(2)、dialog框内容过多时，用页面跳转实现。4、宽度、高度设置(1) 、放在导航栏操作按钮：少于7个字的宽度都设置为loopxo(2) 、导航栏文本字体样式设计 style="font-size:20px;color:#20a0ff;"q(3) 、表格：列表中序号和勾选框的宽度都为:width="80pxh(4) 、dial

16、og框,一般采用size二"small",字体大小采用默认字体。(5) 、输入框宽度一般设置为width="220px"(6) 、表格列表数据项过多时采用过滤，只保留一部分，鼠标浮上去全部展示在鼠标上 而' °5、分页设置(1)、页面设置<div class="block" style="text-align:right;"<el-pagination size-change二"handlesizechange" current-change二"handl

17、ecunrentchange'1:current-page二"page.currentpage" :pagesize二"page.pagesize" :page-sizes=,10> 20， 30， 40 layout="totai丿 prev, pager, next4 jumper sizes" :total="page.totalcount"></el-pagination></div>(2)、声明(3)、点击分页调整handlesizechange(val) co

18、nsole.log(' 每页 $val 条')； 打handlecurrentchange(val) console.log('当前页：$val '); this.page.currentpage = val; this. loaddata();/ 加载数据六、页面数据传输in页面间通过sessionstorage传送数据(json字符串)。例如(1)、将所要传送的value,并将其转为json字符串缓存，即：sessio nstorage.setltem(*work erf orm json.stringify(value);(2)、页面中获取 value,即：sessionstorage.getltemcworkerform')2、vuejs中跨页面传递数据(只传id)(1) 、路由传 id： this.$router.push('/web/inspector/$value.jobld');(反引号)(2) 、index.js 里面 path 后面加/:id (传 id)(3) 、页面接收 id： this.$route.