### Wed Dec 20 2019 00:00:00 GMT+0800 (中国标准时间) 时间转换 1. time.js ```javascript export function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace( RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length) ); } let o = { "M+": date.getMonth() + 1, "d+": date.getDate(), "h+": date.getHours(), "m+": date.getMinutes(), "s+": date.getSeconds() }; for (let k in o) { if (new RegExp(`(${k})`).test(fmt)) { let str = o[k] + ""; fmt = fmt.replace( RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str) ); } } return fmt; } ``` 2. 在需要用到的页面的中引入 formatDate函数： ```javascript <script> import { formatDate } from "@/js/time.js"; </script> ``` 3. 编写过滤 ```javascript filters: { formatDate(time) { var date = new Date(time); return formatDate(date, "yyyy-MM-dd hh:mm"); } } ``` ```vue <el-table-column prop=" releaseTime" label=" 发布时间"> <template scope="scope" > <span>{{scope. row. createTime formatDate} }</span> </ template> </e1- table -column> ``` ### input输入金额正则表达式 - 实现 ```vue <el-form-item label="金额(元)" prop="contractAmount"> <el-input v-model="form.contractAmount" clearable maxlength="10" oninput="value=value.replace(/[^\d.]/g,'')" placeholder="请输入金额" /> </el-form-item> ``` - 在校验中 ```javascript contractAmount:[ { required: true, type: 'string', trigger: 'blur', message:'金额不能为空'}, { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确额格式,可保留两位小数' } ] ``` ### 表格序号连续 ```vue <el-table-column label="序号" type="index" width="50" align="center"> <template scope="scope"> <span>{{ (page - 1) * limit + scope.$index + 1 }}</span> </template> </el-table-column> ``` ### 删除框靠在删除按钮旁 ```vue <el-popconfirm title="确定删除这行信息吗?" @onConfirm="del(scope.row)"> <el-button slot="reference" size="small" type="danger">删除</el-button> </el-popconfirm> ``` ### handleDelete ```javascript handleDelete(row, index) { category.del(row.id).then(({ code, msg }) => { if (code === 0) { this.list.splice(index, 1) this.$notify({ title: 'Success', message: '删除成功', type: 'success', duration: 2000 }) } else { this.$message.error(msg || '删除失败') } }).catch(error => { console.log(error) }) }, ``` ### vue多图上传 #### 图片在没有提交时预览本地的 ```vue <el-form-item label="商品图" prop="name"> <el-upload action="123" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-change="imgPreview" :on-remove="handleRemove" :auto-upload="false"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="silder_imageVisible"> <img width="100%" :src="form.silder_image" alt=""> </el-dialog> </el-form-item> ``` > action这里随便填写用:auto-upload="false"将其警用掉，使用自定义 > 方法:on-change=“imgPreview” ```javascript //移除图片 //this.form.silderimgList上传后的图片文件数组 handleRemove(file, fileList) { console.log('移除图片') this.form.silderimgList=[] for(let i=0;i<fileList.length;i++){ let str="" str = fileList[i].url this.form.silderimgList.push(str) } console.log(this.form.silderimgList); console.log('移除图片') }, //点击放大图片 handlePictureCardPreview(file) { this.form.silder_image = file.url; //console.log(file.url) this.silder_imageVisible = true; }, //图片上传事件 imgPreview (file, fileList) { let fileName = file.name; let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/; if (regex.test(fileName.toLowerCase())) { this.form.silder_image = file.url; } else { this.$message.error('请选择图片文件'); } console.log('图片上传事件') this.form.silderimgList=[] for(let i=0;i<fileList.length;i++){ let obj={} obj = fileList[i].raw this.form.silderimgList.push(obj) } this.form.name = fileList[0].raw console.log(file,fileList); console.log(this.form.silderimgList); console.log('图片上传事件') } ``` #### vue多图上传用**FormData** 对象 ```vue for(var i=0;i<file1.length;i++) { //使用for循环添加图片 if(i>=9) continue; //图片数目不能大于9 else{ if(file1[i].size<=5242880) //上传图片不能超过5M { formdata.append("mood_pic[]",file1[i]); /*注意，这里的双引号里的变量名称后面必须要加上[]*/ } } } ``` ### 可自适应文本高度的文本域 ```vue <el-input type="textarea" autosize placeholder="请输入内容" v-model="textarea1"> </el-input> <div style="margin: 20px 0;"></div> <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5}" placeholder="请输入内容" v-model="textarea2"> </el-input> ```