分类：Element-UI

2020
10-10

element-ui tree结构实现增删改自定义功能代码

element-ui tree结构实现增删改自定义功能代码 首先是页面部分<template><el-treeid="userMtree"ref="tree":data="treeData"node-key="id":render-content="renderContent":expand-on-click-node="false"@node-click="nodeClick":default-expanded-keys='expandedKey'></el-tree></template>下面是js部分exportdefault{props:['treeDataObj','isUserMgt'],//父级传值与判断哪个treedata(){return{treeData:[],//tree数据expandedKey:[],//展... 继续阅读 >
2020
10-10

Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作

Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作 需求：vue-cli项目树形控件：一级节点为本地节点，默认展开一级节点，增删改后局部刷新数据。增加节点，点击确定后局部刷新，渲染新数据。源码element组件样式<el-treeclass="treeitems":data="data"node-key="id":props="defaultProps":load="loadNode"lazy:default-expanded-keys="[0]"@node-click="handleNodeClick"draggable:allow-drop... 继续阅读 >
2020
10-10

Element-ui el-tree新增和删除节点后如何刷新tree的实例

一,当新增节点后刷新当前节点node.loaded=false;node.expand();//新建子节点是刷新一次本节点的展开请求，而重命名和删除则需要刷新父级节点的的展开事件，二,删除节点node.parent.loaded=falsenode.parent.expand()完毕~补充知识：element-ui组件el-tree添加按钮管用，删除按钮，数据会变，但是页面不更新可能是element-ui的版本太低了我用的element-ui2.4.6后来发现2.4.11的是管用的所有更新element-ui版本cnpmieleme... 继续阅读 >
2020
10-09

解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题

解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题 这是一个项目中常见的需求，el-select为下拉多选，默认值不可删除，或者指定值不可删除。实现效果：el-select如下源码中tagclosable属性为el-select的disabled属性，所有明显不支持。解决思路（从el-select的角度来考虑，其他组件组合的情况暂不考虑）想要实现某些选项是不删除，1、需要tag不可删除，2、options不可选择options不可选择很好实现，只需要给一个disabled属性。tag不可删除才是关键。下面是我几种解决... 继续阅读 >
2020
10-09

快速解决Vue、element-ui的resetFields()方法重置表单无效的问题

问题：使用this.$ref['form'].resetFields()无法重置表单项原因：1.没有给表单添加ref属性<el-formref="form"></el-form>2.表单项el-form-item没有添加prop属性，prop属性需要与input框绑定的属性一致<el-formref="form":model="sizeForm"label-width="80px"size="mini"><el-form-itemlabel="活动名称"prop="name"><el-inputv-model="sizeForm.name"></el-input></el-form-item></el-form>3.还有一个经常出现这种问题... 继续阅读 >
2020
10-08

vue+element-ui JYAdmin后台管理系统模板解析

项目搭建时间：2020-06-29本章节：讲述基于vue/cli，项目的基础搭建。本主题讲述了：1、跨域配置2、axios请求封装3、eslint配置4、环境dev,test，pro（开发，测试，线上），run自动调用对应的接口（proxy多代理配置）vue+element-uiJYAdmin后台管理系统模板-集成方案从零到一的手写搭建全过程。该项目不仅是一个持续完善、高效简洁的后台管理系统模板，还是一套企业级后台系统开发集成方案，致力于打造一个与时俱进、高效易懂、高... 继续阅读 >
2020
10-08

使用element-ui +Vue 解决 table 里包含表单验证的问题

应用场景：在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交，同时又需要对table的字段进行校验，效果如图所示：这个校验中，最关键的问题在于如何给el-form-item动态绑定prop。:prop="'tableData.'+scope.$index+'.字段名'"方法一：<template><divclass="app-container"><el-form:model="fromData"ref="from"><el-table:data="fromData.domains"><el-table-columnlabel="姓名"><template... 继续阅读 >
2020
10-08

Vue element-ui父组件控制子组件的表单校验操作

Vue element-ui父组件控制子组件的表单校验操作 方法一：父组件代码：<template><div><child-formref="childRules":addForm="addForm"></child-form><el-button@click="saveForm()"size='medium'>保存</el-button></div></template><script>importchildFormfrom'./childForm'exportdefault{data(){return{addForm:{name:"",desc:""},}},//组件引用components:{childForm},methods:... 继续阅读 >
2020
10-08

Django后端分离 使用element-ui文件上传方式

Django后端分离 使用element-ui文件上传方式 1：导入element<!--引入样式--><linkrel="stylesheet"href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"rel="externalnofollow"><!--引入组件库--><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script><!--引入Vue--><scriptsrc="https://unpkg.com/element-ui/lib/index.js"></script>2：前端文件css：.avatar-uploader.el-upload{border:1pxdashed#d... 继续阅读 >
2020
10-08

详解element-ui 表单校验 Rules 配置 常用黑科技

详解element-ui 表单校验 Rules 配置 常用黑科技 type指示type要使用的验证器。可识别的类型值为：string：类型必须为string。type默认是string//校验string:[{type:'string',message:`请输入字符串`,trigger:'blur'}]<el-form-itemlabel="测试字段"prop="string"><el-inputv-model.number="form.string"placeholder="请输入"></el-input></el-form-item>number：类型必须为number。//校验number:[{type:'number',message:`请输入数字`,trigger:'blur'}]<e... 继续阅读 >
2020
10-08

Nuxt配置Element-UI按需引入的操作方法

Nuxt使用create-nuxt-app创建项目时，选择使用Element-UI为默认组件库，发现Nuxt没有开启Element-UI的按需引入配置，需要自行配置。安装依赖在create-nuxt-app中没有选择Element-UI的先安装。npminstallelement-ui--save或者yarnaddelement-uiElement-UI开启按需引入，必须安装babel-plugin-component插件。npminstallbabel-plugin-component--save-dev或者yarnaddbabel-plugin-component安装完成后，在... 继续阅读 >