![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
elment UI
文章平均质量分 60
IT博客技术分享
没有做不到的,只有想不到的!
展开
-
elment-ui el-tabs组件 每次点击后 created方法都会执行2次
在element-ui的tabs组件中,我们发现每次切换页面,所有的子组件都会重新渲染一次。当子页面需要发送数据请求并且子页面过多时,这样会过多的占用网络资源。这里我们可以使用v-if 来进行判断是否渲染该子页面。不会如何在。原创 2024-03-19 11:36:51 · 919 阅读 · 0 评论 -
elment Loading 加载组件动态变更 text 值bug记录
elment Loading 加载组件动态变更 text 值原创 2023-11-28 17:42:26 · 955 阅读 · 0 评论 -
上传文件夹里面的文件后,按树结构的table表格展示
上传文件夹里面的文件后,按树结构的table表格展示.原创 2023-10-12 15:33:26 · 223 阅读 · 0 评论 -
el-select 下拉框全选、多选的几种方式组件
由于添加了:collapse-tags 属性后,全选选中的时候,正常会默认选中第一个label的值显示,后面是 + 全部数量 -1 . 我们可以在初始化的时候,把默认选中的数组里面最前面添加一项“全选”2. 用selectArr的变量存一下, value的数组 过滤出不含 全选的,剩余全部数据。1. 先用arr1的变量存一下,把下拉框的数组 过滤出不含 全选的,剩余全部数据。:判断如果是全选就在最前面 添加1项 value 值 ‘全选’直接添加一个【全选】复选框,实现的功能跟方法一是一样的。原创 2023-09-19 10:19:42 · 4144 阅读 · 3 评论 -
el-ment ui 表格组件table实现列的动态插入功能
在实际需求中我们经常遇到各种奇葩的需求,不足为奇。每个项目的需求各不相同,实现功能的思路大致是一样的。上图可以看出就是在地址和备注2列之间插入数据,那就好办了。直接在地址后面写一个。通过 for 循环 数组动态遍历出来就可以实现功能了。本文来具体介绍怎么实现table表格动态插入几列。,每列的顺序就看数组里面怎么排序给你返回了。原创 2023-07-14 16:23:27 · 2195 阅读 · 0 评论 -
vue-element-upload 文件上传打开选择文件弹框前进行操作
通过ref逐层触发组件内按钮的handleClick事件,注意区分['importFile']、['fileRefs'],其中['upload-inner'] 是 ImportExcel 组件内部按钮的ref。实现思路在基于element-upload组件的基础上,再加一个按钮,触发按钮后进行选择文件前的操作,操作完成后触发upload的选择文件。在项目中使用文件上传功能时,需求是不能直接弹出弹框,要先二次确认或进行提示。点击自动识别,自动去选择文件上传,调后端的上传接口,然后打开新的页面,显示文件信息。.原创 2022-09-01 10:51:23 · 2874 阅读 · 0 评论 -
element el-dialog对话框实现可拖拽(含4个边界处理)
先上效果图:①上方向:②下方向:③左方向:④:右方向:方法:先定义一个全局的js方法:directives.jscode:export default (Vue)=>{ Vue.directive("drag", { inserted: function (el) { let odiv = el; //获取当前元素 let flag = false; const elDialog = od...原创 2021-10-26 15:24:38 · 339 阅读 · 1 评论 -
el-mentUI 下拉框多选并且可支持checkBox,全选
先上组件的效果图:取值打印:组件 MultipleSelect/index.vue:<template> <div> <!-- collapse-tags 超过2个省略+ 显示 --> <el-select v-model="selectValues" v-bind="$attrs" multiple placeholder="请选择" style=..原创 2021-08-19 17:43:59 · 561 阅读 · 0 评论 -
用element UI组件, dialog 父子组件传值
Elementui中的dialog的组件,但在将dialog作为一个子组件的时候,传值出现了问题。当关闭dialog的时候应该怎么传值?一开始的时候的想法比较简单,就是父组件直接传值来作为子组件的show/hidden的值。然而这样的问题是当子组件close的时候,他会直接直接改变他的值,但是子组件不能直接改变props的值,因此可以通过子组件触发事件给父组件。子组件在关闭时候的事件...原创 2020-03-12 22:37:16 · 2598 阅读 · 0 评论 -
vue element-ui 导航做全屏/取消全屏功能
先上效果图html部分代码: <!-- 全屏 --> <span class="user" @click="toggleFullScreen"> <el-tooltip class="item" effect="dark" :content="isFullScreen ? '退出全屏':'全屏'" placement="bottom"> <i :class="isFullScreen ? '原创 2021-05-14 12:37:40 · 2030 阅读 · 2 评论 -
elment ui 组件bug总结
一、.element-ui dialog设置为点击弹窗以外的区域不关闭弹窗第一种:在el-dialog标签中添加:close-on-click-modal="false"即可<el-dialog title="标题" :close-on-click-modal="false" :visible.sync="dialogEnrol" width="30%"> 弹窗内容</el-dialog>第二种:全局设置在mian.js里面:import Elem.原创 2021-04-04 14:18:17 · 2736 阅读 · 0 评论 -
iview modal 弹框里面 套用 element table表格并且可以多选,解决回显的坑
先上效果图:点击详情和编辑的时候,modal框打开,table表格数据回显问题:那么想要实现table的多选框回显,前提得有多选框,而实现回显也主要有依赖多选框自带的几个事件,当表格存在多选框时这几个事件便可以生效: <FormItem label="角色权限:" prop="roleRight"> <el-card> <el-table ref="...原创 2021-01-13 17:01:34 · 1389 阅读 · 0 评论 -
处理后台返回的复杂数据结构,采用Object.keys方法取值
后台返回的数据结构:json格式化后:实现效果的主要代码: elment ui <el-tabsv-model="activeName"type="card"> <el-tab-panev-for="(item,index)intabName":key="index":label="item":name="index"> <el-tableref="multipleTable":dat...原创 2021-08-30 16:53:10 · 236 阅读 · 0 评论 -
iview ui 和elment ui 的按需引用,减小项目体积
一、先说iview ui 的按需引用首先、先装上iview 的依赖包;4.0的版本已经升级了,新的安装方法:NPM 安装 #推荐使用 npm 来安装,享受生态圈和工具带来的便利,更好地和 webpack 配合使用,当然,我们也推荐使用 ES2015。$ npm install view-design --save引入 ViewUI#一般在 webpack 入口页面ma...原创 2020-03-27 14:30:59 · 1000 阅读 · 0 评论 -
VueCli4.0项目中将excel表格数据导入Elment UI表格并展示(映射的表格标题必须为英文)
先上一个效果图供大家参考:具体步骤如下:第一步、导入并读取Excel功能从整体上来说两种方式,一是前端解析文件后将数据返回给后端,另一种是前端直接将Excel文档返回后台,由后台进行处理。使用哪种方法需要根据具体业务需求,下面简单介绍第一种方法:由前端解析数据1、引入依赖 npm install -S file-saver xlsx npm install -D sc...原创 2020-03-26 18:09:44 · 886 阅读 · 0 评论 -
VueCli4.0项目中将Elment UI表格内的数据导出为Excel文件
第一步、首先安装三个依赖npm install -S file-saver xlsxnpm install -D script-loader或者:yarn add file-saveryarn add xlsxyarn add script-loader --dev第二步、引入两个js文件在src目录下新建excel文件夹,里面放入Blob.js和E...原创 2020-03-26 15:59:47 · 842 阅读 · 0 评论