
elementui
williamyi74
服从感性,抗拒理性
展开
-
策略模式+科里化封装表单校验函数生成rules
因为表单的校验的逻辑是可以复用的,所以可以把校验的逻辑都抽取出来,然后用柯里化去调用,传入校验的策略名和校验的错误信息,返回validator给rules的自定义校验函数。原创 2022-11-03 18:49:27 · 173 阅读 · 0 评论 -
Vue.extend封装函数式调用弹窗组件
平时我们使用组件都是import xxx from 'xxx';然后components里面注册,最后template中使用,这样一套流程下来略麻烦,有没有一种方式能像ElementUI的弹窗组件一样代码调用呢?组件目录结构大概就是这样。原创 2022-08-28 16:53:06 · 991 阅读 · 0 评论 -
el-upload手动控制上传多文件校验和文件删除
之前写过一篇关于el-upload单文件自定义上传文章:axios+elementui的upload使用http-request自定义文件上传_Suk_阿硕的博客-优快云博客_http-request自定义文件上传<!-- 关于组件的部分属性: action:上传的地址,和axios没关系,elementui自己发请求 :show-file-list:是否显示上传的文件列表 :on-success:上传成功的回调 :on-error:上传失败的回调 :before-upload:上传之前的回调,可.原创 2022-04-27 01:02:20 · 12533 阅读 · 0 评论 -
vue扁平数据转树形结构递归组件渲染
这里使用的是用map映射id和自身然后遍历通过parentid找父级的方法源扁平数据:{ "code": 200, "message": "操作成功", "data": [ { "functionId": 10000, "parentFunctionId": 0, "functionName": "安全检测" }, { "funct原创 2022-04-25 11:46:58 · 622 阅读 · 0 评论 -
el-dialog做新增和编辑关闭时重置表单数据并清除提示
我们在做新增和编辑共用一个弹窗时,弹窗关闭后需要重置el-form的数据并清空提示,如果是先编辑关闭的,那么resetFields方法会把编辑的数据做为初始化的数据,所以在打开新增时就会看到数据状态并没有清空,校验提示也在,解决方法:onClose() { this.$refs.form.resetFields(); Object.assign(this.formData, this.$options.data().formData);},在el-dialog关闭的回调里原创 2022-04-10 14:07:03 · 1625 阅读 · 0 评论 -
vue事件传递多个参数
组件上:@click="clickHandler($event,myParam)"方法:clickHandler($event,myParam)// 事件对象放第一个,自定义参数往后按顺序放 当然方法里事件对象接收时的形参名可以取别的,比如clickHandler(e,myParam)扩展:如果单独只接收自定义参数:组件上:@click="clickHandler(myParam)"方法:clickHandler(myParam)如果单独只接收事件对象:组件上:@cl..原创 2021-05-11 10:31:01 · 3446 阅读 · 0 评论 -
记一次el-select的label不显示问题
这里要用visible-change事件记录下拉框当前是打开还是关闭状态,只有打开的时候才进行去重,否则删除层后其他的label会对不上就只显示value了原创 2021-05-04 20:48:04 · 1148 阅读 · 0 评论 -
axios+elementui的upload使用http-request自定义文件上传
<!-- 关于组件的部分属性: action:上传的地址,和axios没关系,elementui自己发请求 :show-file-list:是否显示上传的文件列表 :on-success:上传成功的回调 :on-error:上传失败的回调 :before-upload:上传之前的回调,可以在这里检测文件类型和大小,还可以给额外参数赋值要带到服务器的数据 i...原创 2021-02-28 16:44:46 · 1327 阅读 · 0 评论 -
element使用tabs+navmenu完成后台首页菜单导航联动
首先上图给大家看看实现效果:然后直接上核心代码: <!-- 左侧菜单栏 --> <div class="aside"> <el-menu class="menu" :default-active="$route.path" @open="handleOpen" @close="handleClose" router原创 2021-02-26 23:58:16 · 2760 阅读 · 2 评论 -
使用Vue的mixin混入抽取elementui的分页条el-pagination的数据和方法
1.创建混入的文件2.抽取混入的代码// 将分页的公用代码抽取出来 规定查询数据的方法名为fetchData,重新回显的方法名为reloadData,页面中统一调用export default { data() { return { total: 0, // 总记录数 currentPage: 1, // 当前页码 layout: 'total, sizes, prev, pager, next,原创 2021-02-26 19:28:45 · 632 阅读 · 0 评论 -
基于Vue+element表格删除最后一页的最后一条数据后回显数据为空解决
当我们在删除最后一页的最后一条数据时,我们想要的效果是回到上一页,查询处上一页的数据显示出来,当前页码变成上一页,而真正删除的时候显示出来是个空的,而且页码也还在当前页这时我们就需要去判断当前删除的是否为最后一页的最后一条数据,如果是,我们删除后要将当前页码-1再查询,这样页码回到了上一页,查询出来的也是上一页的数据了,话不多说下面爷直接上代码:// template模板<el-table-column label="操作"> <template slot-scope=原创 2021-02-25 01:30:13 · 2248 阅读 · 3 评论 -
elementui用resetFields方法重置表单无效问题解决
this.$refs.form.resetFields()首先我们要知道这个方法是做了什么事,下面是elementui官网给出的解释:由此可知,这个方法是重置表单为初始值,相信大家和我一样对这个初始值有歧义,其实这个初始值并不是指data中定义的字段值,而是第一次字段被赋值的时候下面还原博主的问题:当我页面加载完成数据渲染好后,我先点击修改,弹出框会回显当前行数据,然后关闭窗口我在beforeclose事件中进行了resetFields,等我再点击新增分类时,表单并没有被重置,回显了原创 2021-02-25 00:36:40 · 706 阅读 · 0 评论