需求：1.表单输入信息2.上传Excel附件3.下载附件模板4.限制上传文件的格式、文件的大小、文件的数量5.将表单和Excel文件一起提交给后端效果图：样式部分下载模板将文件拖到此处，或点击上传提交data部分代码data(){return{peopleform:{name:'',phone:'',address:'',},fileList:[]}},method中的代码methods:{//覆盖默认的上传行为httpRequest(raw){this.fileList.push(raw)},//上传前beforeUpload(file){letfileSize=file.sizeconst
1.问题：使用elementui时间选择报错今天在使用elementui时间选择器时，一切正常，但发现浏览器一直报错，但奇了怪了，明明是从官网上复制的组件代码，咋还会有问题，错误提示如下： 2.分析：Avoidmutatingapropdirectlysincethevaluewillbeoverwrittenwhenevertheparentcomponentre-renders.Instead,useadataorcomputedpropertybasedontheprop'svalue.Propbeingmutated:"placement".这个报错是提示我们避免直接更改prop，因为
在el-input标签上加一个 :validate-event="false"属性即可实现输入过程中不再校验值的合法性，只有点击提交按钮才会校验：//......//......letformRules=ref({ip:{required:true,trigger:['blur','change'],message:'请输入正确的IP地址'}});constformDataRef=ref();//......//提交事件constonSubmit=()=>{ipInput.value.validate((valid:boolean)=>{if(valid){}})}
使用场景在使用Dialog组件时，当点击弹框外的空白处时，仍然会触发关闭弹框事件，一些业务场景不适合使用这种交互，需要只能点击关闭和取消按钮才消失。方法一//close-on-click-modal 是否可以通过点击modal关闭Dialog//close-on-press-escape 是否可以通过按下ESC关闭Dialog 方法二 //main.js中可以全局设置点击空白处、按下ESC不能关闭Dialog弹窗 //首先你得保证在main.js里面引入了element-ui importElementUIfrom'element-ui' //全局修改默认配置，点击空白处不能关闭弹窗 Ele
element的el-table表格复选框只能选中一条，选择下一条，上一条去掉勾选。使用文档中select方法，el-table绑定一个ref。具体代码实现如下data(){return{bill_id:""}}，method:{select(selection,row){this.bill_id=row.id;//清除所有勾选项this.$refs.multipleTable.clearSelection()//当表格数据都没有被勾选的时候就返回//主要用于将当前勾选的表格状态清除if(selection.length==0)returnthis.$refs.multipleTable.to
改动点 v-model= 绑定的必须是个数组，在data中定义好， 回显的时候，后台传递数组有值就能显示多个选中的。data(){return{roleTypeDic:[{roleId:'01',roleName:'经理'},{roleId:'02',roleName:'销售'}],//这边可以动态后台查询form:{orgRoles:[],//这个里面是roleId数组，后台获取到list后页面会直接显示},};},后台//后台list有值页面就会显示已选中的ListorgRoles=ArrayList();orgRoles.add("01");orgRoles.add("02");遇到问题
1、牢牢记住，vue是基于JavaScriptES6的，所以只要刷新页面里面data下的数据，页面会自动刷新的。所以这个数据是父页面传给el-dialog的，要刷新父页面的数据，el-dialog页面内的组件就可以刷新了。2、在页面的组件处理后台程序完成后，可以调用that.$parent.$parent.【父页面的方法】来刷新数据。例如：monitorDataService.saveFileToMonitor({updateFile:that.updateFile,monitorId:that.form.monitorId}).then(response=>{//完成后刷新if(respon
在使用element-ui的树形表格(el-table)懒加载(lazy)，并使用了懒加载，出现了一个问题，在对当前节点添加、修改、删除一个子节点数据时，当前节点的子节点数据并不自动刷新出来。element-ui官方没有提供子节点修改数据后局部刷新方法。......删除首先，在data(){}中定义一个maps:newMap();data(){return(){maps:newMap(),dataList:[]}}然后，当数据进行懒加载时把点击的节点数据存储在map中，点击删除时再从map中获取节点数据，进行数据刷新操作。methods:{//懒加载load(tree,treeNode,res
背景：在选择所属部门（部门可新建，则部门会很多）时，如果部门特别多的情况下，在下拉选择时，el-popover弹出框会变得很长很长，页面不美观。 产品要求：在超长时，固定高度，支持滚动条。在代码里修改样式时，一直不生效，仔细查看dom才发现，popover的dom创建在了最外层，也就是和根组件app同级，所以在任何的下写的css均不能生效。如果直接在下粗暴修改，肯定会影响到其他组件的样式，不可以这样修改。查阅官方文档发现，可以为popover组件添加类名，这样就不会影响其他样式了。 代码如下： 效果如下：还可以对滚动条的样式进行修改，比如隐藏滚动条或者改变滚动条的粗细等代码：.el-popov
由于element-ui把input进行了封装，input外面是多一层div的。在element-ui里有很多因为自身封装了几层标签导致事件和样式无法按想要的效果呈现，遇到后可以在网页中查看dom结构分析原因。所以对于el-input，使用@keyup.enter是无效的，需要加上.native限制符.native修饰符的作用：当想要在一个组件的根元素上直接监听一个原生事件，这时，就可以使用v-on的.native修饰符。el-inputv-model="serverTimer"@blur="addTimer"@keyup.enter.native="addTimer"placeholder=
