分类：element

2020
09-27

element中的$confirm的使用

可以诸如此类的封装一下/**公用提示窗*@export*@param{string}[desc="确认操作"]弹框提示文字*@param{string}[title="提示"]弹框标题*@param{string}[confirmButtonName='确认']确认按钮文字*@param{string}[cancelButtonName="取消"]取消按钮文字*@param{boolean}[distinguishCancelAndClose=false]关系和取消是否执行同一方法*@return**/exportfunctionconfirm(desc='确认操作',title='提示',c... 继续阅读 >

2020
09-27

VUE+elementui组件在table-cell单元格中绘制微型echarts图

需求效果图示例实际完成效果图**代码实现注：table表格为二次封装的子组件-在table表格中根据scope.$index动态设置元素的id，便于指定单元格的echarts初始化；-在单元格中触发一个方法，传入当前的scope.row数据或者指定其他数据，并且传入scope.$index以及一个字符串便于识别当前是哪条数据的charts-在方法中绘制echarts**<el-table-columnalign="center"><templateslot="header"slot-scope="scope"><divv... 继续阅读 >

2020
09-27

详解element上传组件before-remove钩子问题解决

应公司业务要求已上传文件删除前提醒确认代码如下if(file&&file.status==="success"){returnthis.$confirm('此操作将永久删除该文件,是否继续?','系统提示',{confirmButtonText:'确认',cancelButtonText:'取消',type:'warning',center:true}).then(()=>{this.$message({type:'success',message:'删除成功!'});}).c... 继续阅读 >

2020
09-24

vue+element 实现商城主题开发的示例代码

本文介绍了vue+element实现商城主题开发的示例代码，分享给大家，具体如下：<template><div><divclass="set-phone"><el-form:model="theme":rules="rules"ref="ruleForm"class="demo-ruleForm"><el-form-itemlabel="主题名称:"prop="name"><el-inputv-model="theme.name"size="small"maxlength="18"show-word-limit></el-input></el-form-item><el-form-itemlabel="顶部背景色:"prop="backgroundColor"... 继续阅读 >

2020
09-24

Element的el-tree控件后台数据结构的生成以及方法的抽取

最近用到了el-tree控件，主要是数据的格式，按照官网的数据格式来就可以显示节点的树形结构了。代码参考很多这里给出一个比较好的链接：https://www.jb51.net/article/181990.htm代码说明在注释里写的很详细了已经，这里不再叙述说明。至于为什么抽取成这种格式的数据，那是因为ElementUI-tree规定的数据格式，你想要用这个控件，就必须按照他们规定的这个格式来。数据格式如下：Controller代码@RequestMapping("/cateList")... 继续阅读 >

2020
09-24

element-ui树形控件后台返回的数据+生成组织树的工具类

    开发项目的时候遇到需要在表单中选择参会人员，根据不同部门下选择不同的人，在element-ui中有树形控件能满足这种情况，后台封装数据记录一下。  封装格式：  返回数据格式：  接收数据的pojo类：2018年4月12日修改  本以为以上的数据结构能满足项目的使用，但是我错了，当时的数据库中只有不到10条的数据并且组织结构非常单一，随后同事导入了数据（600... 继续阅读 >

2020
09-23

基于Element的组件改造的树形选择器(树形下拉框)

前言：由于做项目需要一个树形选择器，项目用的也是element-ui框架，然而它自带的选择器组件没有树形选项，又不想引入其他的框架组件，于是自己利用el-select和el-tree改造了一个，感觉还挺好用的，就封装成了一个组件，如下图：element-ui的el-select组件的选项只能是列表形式： 改造后的树形选择器：简介：此树形选择器组件是基于elment-ui框架的el-select和el-tree组件的基础上改造的，其解决了原el-select组件的选项列表... 继续阅读 >

2020
09-23

ElementUI Tree 树形控件的使用并给节点添加图标

前言： 因为项目需要用Vue做一个管理系统，其中有一个公司部门的管理页面有用到ElementUI的树形控件，但是结构中没有使用chexkBox选项框，针对这个功能碰到的一些问题做一下总结一，数据渲染1）在<el-tree>标签中绑定data属性2）在vue实例的data中声明list变量3）从后台获取到的数据是以数组里面嵌套多个对象的结构并赋值给list，当前的数据是OrgName为当前结构名称，Children作为子分支数组，子分支中的结构与当前结构一致... 继续阅读 >

2020
09-23

ElementUI中el-tree节点的操作的实现

其实tree的有些方法用起来是很方便的，this.$refs.tree.getCheckedKeys()；这个原生态的方法。官方文档上说的是，返回一个数组。有了这个方法，我们就可以得到选中的每个节点的id,拿到了id，那所有的问题就迎刃而解了。废话不多说，直接上代码html<divid="app"><el-row><el-button@click="checkedKeys">得到节点id</el-button><el-button@click="addNode">添加节点</el-button><el-button@click="checkedKeys"... 继续阅读 >

2020
09-23

element el-tree组件的动态加载、新增、更新节点的实现

最近在根据需求，需要用到树形控件，ele的封装了树形控件正好拿来用，用的途中遇到一些问题就总结下，哈哈哈说正事，我需要动态的加载出整个树形结构，刚好就有符合需求，啦啦啦用的时候出现问题了，我要如何把后台返回个我的数据加载到表里呢，上菜。。。<template><el-treeempty-text="暂无数据":expand-on-click-node="false":props="defaultProps":load="loadNode"node-key="id"lazy><divclass="custo... 继续阅读 >

2020
09-23

element-ui table行点击获取行索引（index）并利用索引更换行顺序

1)将每一行的索引插入操作行中，即为每一行数据添加一个属性index使用el-table已经给处的方法：tableRowClassNamehtml中：<el-table:row-class-name="tableRowClassName"></el-table>js中：只需放入methods中即可，el-table会自动触发(不知道为什么贴源码不行啊)点击进行事件操作：在el-table-column中加入slot,可以拿到当前点击列所属的行，并完成对其重新排列js中：到此这篇关于element-uitable行点击获取行索引（index）并利... 继续阅读 >