原因分析官方文档说el-form-item的prop可选值应为form组件的model中的字段，所以如果prop与内部的el-input绑定的model字段不一致就会出现校验失效。因为项目中遇到复杂的form表单传输 具体最终提交格式如下对应的校验规则原本我是只传的address,因为address对应的是:model="dept",而v-model绑定的确是dept对象子级对象里面的数据,这样就会造成校验失效.所以,需要我们把prop="address"换成这个prop="extendOrg.address"rules 校验名称换成这个 ['extendOrg.address']原因是因为rules针对的是:model="dept" model绑定的那个数据 model.address 当然找不到 所有需要加上你套的数据格式这样就好了
Element el-form根据选择条件动态控制表单必填项
业务场景:当人员核实为证件号码变更时正确身份证号码为必填项我们可以给单个的form-item添加rules 也可以把el-form的rules判断给不给这个el-form-item即prop传的规则动态的判断有或者没有
限制开始和结束时间为最近一个月(element ui)
限制开始和结束时间为最近一个月(element ui) <el-date-picker v-model="cashFlowForm.startTime" style="width: 100%" type="date" placeholder="选择开始时间" value-format="timestamp" :picker-options="beginDateOption" /> data(){ return { beginDateOption: { disabledDate: (time) => { const space = 30 * 24 * 3600 * 1000 const minTime = new Date().getTime() - space const maxTime = new Date().getTime() // return 一个公式 最大为当前时间，最小为30天前 return time.getTime() < minTime || time.getTime() > maxTime } },} }element ui 日期时间组件默认展示一周时间在mounted钩子函数中获取时间戳 (建议定义方法再mounted钩子去调用)const date = new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 6) const startTime = date.getFullYear() + '-' + ((date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)) + '-' + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' 00:00:00' const date2 = new Date() const endTime = date2.getFullYear() + '-' + ((date2.getMonth() + 1) < 10 ? '0' + (date2.getMonth() + 1) : (date2.getMonth() + 1)) + '-' + (date2.getDate() < 10 ? '0' + date2.getDate() : date2.getDate()) + ' 23:59:59' this.forms.times = [startTime, endTime]与后端联调时可以这样传参效果图:限制时间 带上时分秒 time:[timestampToDate1(new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 6)) + ' 00:00:00',timestampToDate1(new Date())+ ' 00:00:00']
当我们使用element组件库的Tree组件时，我们需要一个树形数据才能进行渲染示例数据:const arr = [ { id: '01', name: '张大大 项目经理', pid: '', job: '项目经理' }, { id: '02', name: '小亮 产品leader', pid: '01', job: '产品leader' }, { id: '03', name: '小美', pid: '01', job: 'UIleader' }, { id: '04', name: '老马 技术leader', pid: '01', job: '技术leader' }, { id: '05', name: '老王 测试leader', pid: '01', job: '测试leader' }, { id: '06', name: '老李 运维leader', pid: '01', job: '运维leader' }, { id: '07', name: '小丽 产品经理', pid: '02', job: '产品经理' }, { id: '08', name: '大光 产品经理', pid: '02', job: '产品经理' }, { id: '09', name: '小高 UI设计师', pid: '03', job: 'UI设计师' }, { id: '10', name: '小刘 前端工程师', pid: '04', job: '前端工程师' }, { id: '11', name: '小华 后端工程师', pid: '04', job: '后端工程师' }, { id: '12', name: '小李 后端工程师', pid: '04', job: '后端工程师' }, { id: '13', name: '小赵 测试工程师', pid: '05', job: '测试工程师' }, { id: '14', name: '小强 测试工程师', pid: '05', job: '测试工程师' }, { id: '15', name: '小涛 运维工程师', pid: '06', job: '运维工程师' }, { id: '16', name: '小才 运维工程师', pid: '07', job: '运维工程师' }, ]方法:递归/** * 将列表型的数据转换成树形数据 => 递归算法 * 这里是要建立树形结构, 所以一定要找一个头 */ export function tranListToTreeData(list, rootValue) { const arr = [] list.forEach(item => { if (item.pid === rootValue) { // 以 item.id 作为 父 id, 接着往下找 const children = tranListToTreeData(list, item.id) if (children.length > 0) { item.children = children } // 将item项, 追加到arr数组中 arr.push(item) } }) return arr }我们发现,一级数据的pid值是空,所以传入的value为空,一级菜单就得到了.再以 item.id 作为 父 id, 接着往下找(递归),判断递归的数组长度,长度大于0则,是对应父级的children(不固定,element定义可以在props更改哦 记得看文档)效果如下将tree数据转为arrfunction treeToList(data) { let ret = []; const fn = (list) => { list.forEach(item => { ret.push({ ...item, children: undefined, pid: item.pid === '0' ? null : item.pid}); if (item.children) { fn(item.children); } }) return ret; } return fn(data); }精简后的写法//第二种 const treeToarr = (list=[])=>{ let arr =[] list.forEach(item=>{ arr.push({...item,children:undefined,pid:item.pid==0? null : item.pid}) if(item.children){ // arr.push(...treeToarr(item.children)) arr =arr.concat(treeToarr(item.children)) } }) return arr }树形数据搜索返回节点刷抖音刚好看到这个视频,觉得手痒就写来试试.const findTree = (data, label) => { let result = [] if (data.label.includes(label)) { result.push(data.label) return result } if (data.children && data.children.length > 0) { for (let i = 0; i < data.children.length; i++) { let res = findTree(data.children[i], label) if (res.length > 0) { result = result.concat(data.label, res) break } } } return result }
:http-request="handleRequest" handleRequest(obj) { // console.log(obj) // 找到对应的上传的这个file的项 const fileObj = this.fileList.find(item => item.uid === obj.file.uid) fileObj.status = 'uploading'// 要上传的文件状态改为uploading if (obj.file) { // 执行上传操作 cos.putObject({ Bucket: 'luoxue-1252247442', /* 存储桶 */ Region: 'ap-nanjing', /* 存储桶所在地域，必须字段 */ Key: obj.file.name, /* 文件名 */ StorageClass: 'STANDARD', // 上传模式, 标准模式 Body: obj.file, // 上传文件对象 //进度的回调函数，进度回调响应对象（progressData） onProgress: (progressData) => { //percentage 百分比 fileObj.percentage = parseInt(progressData.percent * 100) } }, (err, data) => { // console.log(err || data) if (err) return console.log(err) if (data.statusCode === 200) { // console.log('地址:', 'https://' + data.Location) // console.log('uid:', obj.file.uid) // 更新状态 fileObj.status = 'success' // 修改地址 fileObj.url = 'https://' + data.Location } console.log(data) }) } },记得先导包,配置身份import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk) const cos = new COS({ SecretId: xxx, // 身份识别ID SecretKey: xxx // 身份秘钥 })腾讯对象存储文档地址:https://cloud.tencent.com/document/product/436/64960
问题如下:首先,elementui是有对应的事件函数的,如图:步骤1.页面代码 点击上传 2.在before-upload事件中判断文件大小，不符合返回falsebeforeUpload(file) { let fileObj = { name: file.name, size: file.size, status: "开始上传", process: 0, id: file.uid } if (file.size > 100 * 1024 * 1024) { console.log('上传文件过大', file.size) return false //必须返回false } this.fileList.push(fileObj) }, ————————————————版权声明：本文为CSDN博主「franklin_yuan」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/xin_yun_Jian/article/details/103620480补充3.发现这个兄弟询问的是上传总文件的大小,emmm.目前不知道他的需求是一次上传多个文件的总和,还是分多次上传文件的大小总和.可以定义一个变量,每次上传将上传文件的大小累加给这个变量.对这个变量进行判断但是这种有bug啊,页面一刷新定义的变量值就重置了...