element
文章平均质量分 74
sqwu
这个作者很懒,什么都没留下…
展开
-
vue el-checkbox按下shift键实现批量选择数据
1.先看下效果2.代码分析1.添加html代码,先将列表写出来<el-button @click="checkAll(true)">全选</el-button> <el-button @click="checkAll(false)">全不选</el-button> <el-button @click="checkInvert">反选</el-button><el-checkbox-group v-model="se原创 2021-03-24 17:53:07 · 3280 阅读 · 0 评论 -
el-select改造成树形下拉,支持模糊查询
下拉列表改成树形结构,点击哪个节点,就选中哪个节点,效果如图:代码:<el-select v-model="name" placeholder="请选择" clearable @clear="handleClear" > <el-option :value="list" class="sel原创 2021-01-06 15:00:36 · 3357 阅读 · 6 评论 -
el-table底部空白出现滚动条,el-table__body-wrapper高度小于el-table的高度
今天在研究keep-alive页面缓存的时候发现,切换到其他页面再切换回已打开的页面时,el-table表格出现底部还有空白,但是出现了滚动条的问题。查看控制台发现el-table__body-wrapper高度小于el-table的高度。如图:解决:在网上找了一些方法,发现doLayout()方法可以完美解决!element2.0.5发布的该方法,可以用于重新计算表格布局使用方法:如果不是缓存页面,在mounted调用,如果是缓存页面,则在activated调用。mo原创 2020-12-30 15:30:25 · 2950 阅读 · 1 评论 -
el-select改造成树形下拉
下拉列表改成树形结构,点击哪个节点,就选中哪个节点,效果如图:代码:<el-select v-model="name" placeholder="请选择" clearable @clear="handleClear" > <el-option :value="list" class="sel原创 2020-12-25 14:59:58 · 2008 阅读 · 2 评论 -
解决element el-pagination分页最后一页数据清空了页码显示正确,但是列表为空
vue原创 2020-11-12 15:02:10 · 3148 阅读 · 2 评论 -
解决自定义组件表单验证不能及时生效,提交的时候才生效的方法
问题:如图,内容已经填写,但是非空提示语还在,只有点击后面的确定按钮才会生效解决办法:在子组件的input事件添加手动校验,如果是远程查询组件的话还要在change事件添加手动校验:<el-form-item prop="policyNo" class="append-form-item"> <remote-search ref="appendPolicyNo" :result原创 2020-10-13 09:48:52 · 1931 阅读 · 0 评论 -
el-select远程查询大数据量分段加载
el-select远程查询大数据量分段加载1.问题:最近使用elementUI的el-select组件的远程查询功能,发现在大量数据(1w条以上)的时候出现页面卡死的情况,经过排查,产生问题的原因是前端渲染造成的。2.解决思路1.在查找解决方案的时候看到一个解决办法是加载前50条,效果是这样的:2.按照这个思路,想到了...原创 2020-09-02 12:41:53 · 2769 阅读 · 6 评论 -
elementUI的textarea鼠标聚焦边框颜色
今天突然发现textarea组件,鼠标点击时边框是黑色的,而项目整体色调是蓝色解决办法:设置outline-color属性样式1.HTML<textarea v-else ref="msgcontent" v-model="processForm.content" placeholder="请输入处理内容" :style="textareaStyle" class="input-textarea" @focus="textFocus" />2.CSS.input-te原创 2020-08-10 10:59:45 · 3875 阅读 · 1 评论 -
el-table高度不正确
问题:如图,表格拥有的高度是红色框的,但是显示的时候高度却只有橙色框原因:查看控制台发现,el-table__body-wrapper is-scrolling-none属性有个内联样式,height值为220px,而且这个值会随着控制台的拖动变化。解决:在全局样式添加代码。其中multiple-table是表格的class.multiple-table /deep/.el-table__body-wrapper { height: 90%!important.原创 2020-07-29 10:27:25 · 3721 阅读 · 2 评论 -
elementUI el-image图片加载失败解决
使用el-image显示图片加载失败代码:<el-image style="width: 100%; height:50px; margin:4px 5px 2px 5px;" src="../assets/logo1.png"/>效果:解决:src用里面加个require代码:<el-image style="width: 100%; height:50px; margin:4px 5px 2px 5px;" :src=.原创 2020-06-30 11:20:56 · 20521 阅读 · 12 评论 -
el-table index换页序号叠加
效果图:代码:<el-table-column type="index" label="序号" width="50" align="center" :index="computeTableIndex" />写在methods:computeTableIndex(index) { return (this.currentPage - 1) * this.pageSize + index + 1 },...原创 2020-06-08 17:24:44 · 757 阅读 · 1 评论 -
div+elementUI实现穿梭框
element-ui自带的穿梭框两边都是列表的格式,想要更多样式就自己造吧~思想是:点击“添加”数据从左边列表删除,插入到右边列表中,由于没有添加后台,刷新之后数据就恢复了,实际使用的时候得访问后台接口才行~完整代码在最后面。效果图:左边是一排按钮组成的列表,也可以用ul li实现,右边是el-table表格。1.布局:添加对话框,将对话框的body从左到右分成三部分&l...原创 2020-03-26 12:10:02 · 3119 阅读 · 4 评论 -
vue项目中升级element-ui
新版的element-ui有许多图标,版本低的的很多图标都无法显示。1.卸载npm uninstall element-ui2.安装npm install element-ui -S3.main.js修改引入方式import Element from 'element-ui'import 'element-ui/lib/theme-chalk/index...原创 2020-02-25 11:21:28 · 457 阅读 · 0 评论 -
el-pagination换页添加刷新功能
element-ui的换页组件el-pagination添加刷新的功能效果如图1. 添加换页组件,在layout添加slot字段layout="total, sizes, prev, pager, next, jumper, slot"2.在el-pagination组件里面添加按钮即可,可以根据需求添加各种组件3.完整代码<el-pagination ...原创 2020-02-17 17:48:45 · 2512 阅读 · 0 评论 -
竖型el-tabs添加滚动条
竖型的el-tabs的样子先看看官网的例子:当左边的菜单多了之后就会变成下面这样:上面和下面都多了箭头,要查看后面数据只能点击箭头,不能滚动鼠标向下,操作起来很不方便官网没有关于滚动条的配置,只能自己探索:1.f12打开控制台,找到左边标签栏对应的代码,具体方法如图:2.这上面找到的代码修改的效果只是暂时的,将css复制下来,写到项目里面.el-tabs--l...原创 2019-12-27 15:57:39 · 6590 阅读 · 2 评论 -
el-pagination假分页表格数据的绑定方式
:data="tableData.slice((currentPage - 1)*pagesize, currentPage*pagesize)":data="tableData.slice((currentPage - 1)*pagesize, currentPage*pagesize)"原创 2019-12-23 10:13:10 · 1109 阅读 · 0 评论 -
vue element 添加遮罩层
el-dialog自带有遮罩层,但在:modal=“true” :modal-append-to-body=“true” 等设置都没有效果的情况下,考虑自己加一个遮罩层吧添加html,div里面可以添加文字或图片 <div v-if="showModal" class="mask"> <img class="loading-image" src="../../im...原创 2019-12-20 10:00:12 · 17998 阅读 · 0 评论 -
vue elementUI表单重置
网上的方法是this.$refs.editForm.resetFields()但是这个对于我来说没有效果于是我想到了修改功能的表单回显 this.editForm = Object.assign({}, row)同理可得,清空表单的方式是this.editForm = Object.assign({}, '')前提是数据格式是这样的:每个表单项都要有prop属性...原创 2019-11-25 10:16:35 · 998 阅读 · 0 评论 -
element全局修改页面的滚动条样式
//滚动条的宽度::-webkit-scrollbar { width: 8px; // height: 10px;}//滚动条的滑块::-webkit-scrollbar-thumb { background-color: #063b5a27; border-radius: 5px;}效果原创 2019-11-20 09:28:50 · 1440 阅读 · 0 评论 -
el-table默认选中
单选框默认选中this.$refs['singleTable'].setCurrentRow(row, true)多选框默认选中this.$refs['multipleTable'].toggleRowSelection(row, true)原创 2019-11-12 15:34:38 · 5687 阅读 · 0 评论 -
el-radio el-select el-checkbox在对话框选择时页面抖动
直接写在没有scoped的style里面1.表单验证信息出现时页面抖动.reprint-remark-form .el-form-item__error { transition: none!important;}2.多选框选中时页面抖动.el-checkbox ::after { transition: none!important;}3.单选框选中时页面...原创 2019-11-07 09:55:16 · 4278 阅读 · 4 评论 -
el-dialog__body只修改当前页的样式不覆盖全局
.add-dialog是css变量名写在 不加scoped的style里面/* 修改本页对话框,不覆盖全局 */.add-dialog .el-dialog__body {background-color: tan !important;}原创 2019-11-05 16:12:56 · 12064 阅读 · 0 评论 -
el-form表单添加自定义验证
添加表单el-form必不可少的字段: :model、ref、:rules 还有表单项里的prop最后添加一个确定按钮和一个取消按钮,取消按钮的cancel功能是点击取消按钮及时清除验证信息在data() {}里面添加验证规则在data的return里面引用验证规则在确定按钮里面使用验证saveAdd: function() { thi...原创 2019-11-05 10:33:52 · 5094 阅读 · 0 评论 -
vue el-upload实现上传文件到后台的功能
vue 使用element-ui的el-upload实现上传文件到后台的功能1.添加el-upload控件<el-upload :action="action" :file-list="modeList" :http-request="modeUpload"> <el-button size="small" type="primary...原创 2019-10-30 18:30:49 · 24117 阅读 · 13 评论 -
循环遍历的el-select,实现el-option对应选中,获取每个下拉框选中的内容
el-select下拉框的个数是根据后台数据动态生成的,所以el-select只写了一个,所有的v-model也只有一个,而且el-option的选项都是相同的,这样就会有一个问题,当选择其中一个下拉框时,其他的下拉框也会被选中同样的数据。首先想到的办法就是能不能让每个下拉框的v-model变得不一样,也就是说能不能让v-model绑定的数据变成动态的?我也就是按照这个思路做的运...原创 2019-10-08 15:06:57 · 26719 阅读 · 1 评论 -
element表格分页功能
element表格分页效果图1.添加表格和分页组件<el-table stripe :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border height="328"> <el-table-column type="index"></el-table...原创 2019-08-21 22:13:09 · 7132 阅读 · 0 评论