vuejs前端页面开发总结

《vuejs前端页面开发总结》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、一、表单：1、常用属性说明

2、class="standard11label-position=l,top,,>(X):inline="true"行内表单模式：每个屉m横排(2)、：厂川亡UbRu仏"定义校验规则，例如必填(3)、label-'positioi^="top"表单域标签的位置为亡op(4):mo6/e/=nworkForm,＞表单绑定数据源(5)、表单中el-form-

3、item标签行间距，默认行间距比较大，margin・bottom:20px;・el-form-item{margin-bottom:3px;}2、常用校验注意问题(1)、trigger:'blur'^Htrigger:'change'使用时注意。3、自定义校验：(1)input框位数限制，在＜el-input＞中使用，例如:＜el-input:maxlength="3"＞即限制最大input框输入为3.(2)、为了便于统一管理，口定义的校验均定义到src/common/js/validate.js中，(3)、自定义校验一定要有callb

4、ack();回调函数，vlaue—般为字符串类型的constcheckBoxNum=(ruls,value,callback)=>{setTimeout(()=>{if(lvalue){callback(newError(1出库盒数不能为空'))；}if(value*200>ruls.maxValue()){callback(newError('岀库数量不得大于当前系统库存量']));}if(!Number.isInteger(value*1)){callback(newError(1请输入一个整数'))；}else{if(value<

5、0

6、

7、value>50){callback(newError('岀库盒数不得大于50盒'))；}else{callback();}}};export{maxValue^minValue，checkNum,xcheckBoxNum}；使用吋引用如下import{checkBoxNum}from'@/common/js/validate';即可使用。4、form表单数据情清空容易遇到的问题(1)、(2)、清除form表单屮的数据，需要在每个要想被

8、清除内容的小组件上注意写prop=”…”(3)、this.$refs[formName].resetFields();二、表格1、常用属性说明(1)>ref为引用(2)>:row-class-name

9、y样式处理函数2、自定义模板(1)、usedNum为数据源里面的字段

{{scope>row.usedNum}}/{{scope.row.maxNum}}

10、、使用字典{{OutLibFlag[scope•row.permitOutLibFlag]}}3、表格屮根据特殊条件做行样式处理：例如：标红显示(1)、定义函数

11、me="tableRowClassName11>(2)、根据条件做样式处理tableRowClassName(row){lettoday=newDate();letyesterday=newDate(tod