![](https://img-blog.csdnimg.cn/20210310112350850.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue+elementui相关知识点和难点
记录在开发过程中遇到的技术难点和解决方法
String佳佳
这个作者很懒,什么都没留下…
展开
-
el-form 触发单个校验
el-form 触发单个校验原创 2022-07-11 11:04:48 · 3676 阅读 · 0 评论 -
【vue+elementUI】通过读取本地文件,实现全国省市区的级联选择
读取本地文件,获取中国地理数据信息:如何读取本地文件文件下载地址代码部分:原创 2022-06-21 09:29:10 · 487 阅读 · 0 评论 -
el-table多选分页时,记住其他页的选中状态
效果图:实现方法:核心是el-table-column的reserve-selection属性<el-table :data="tableData" :row-key="getRowKey" @selection-change="handleSelectionChange" @row-click="rowClick" > <el-table-column type="s原创 2022-04-29 11:29:15 · 770 阅读 · 1 评论 -
el组件自带的函数传自定义参数,并且保留原有函数参数
<el-input v-model="input" placeholder="请输入内容" @change="change($event,'testStr')" />methods: change(val, str) { console.log(111, val, str) },//打印内容: 111,'输入框的实时输入值',testStr原创 2022-01-17 09:50:06 · 505 阅读 · 0 评论 -
vue+lementui+js 自定义日历
1、效果图:如图所见,初始加载默认选中当天日期,下拉选择月份,左右切换年。早于当天日期字体为灰色,晚于当天日期字体为黑色。鼠标点击莫一天,返回某天的年月日字符串形式(如:‘2021/12/22’)2、实现方法: <el-select class="select" v-model="month" placeholder="请选择" @change="monthChange" style="width: 180px"> <el-option原创 2021-12-23 10:30:17 · 221 阅读 · 0 评论 -
vue-cli使用@表示src
在vue.config.js文件里面配置const path = require('path')function resolve(dir) { return path.join(__dirname, dir)}module.exports = {...devServer:{},configureWebpack: { // provide the app's title in webpack's name field, so that // it can be access原创 2021-09-15 15:40:00 · 465 阅读 · 0 评论 -
el-tree 实现仅限叶子节点显示勾选框,并且只能单选
题外话:如何修改tree当前行的高亮显示样式.el-tree-node:focus > .el-tree-node__content { background-color: #ccc !important; }好,现在正式开始实现标题的问题,具体代码如下(最后通过 this.$refs.tree.getCheckedNodes() 方法来获取选...原创 2019-08-20 11:13:35 · 14304 阅读 · 13 评论 -
关于解决el-select组件自动清除数据空格的问题
用el-select组件渲染ydlbmc字段,数据里面有空格,但是渲染上去的时候空格被组件自动清除了解决方法一:在拿到数据的时候循环数组对象,把ydlbmc字段的空格替换成"   ;",并使用v-html来解析数据<el-select v-model="selForm.ydlbValue" clearable placeholder="请选择"> <...原创 2019-08-13 10:14:34 · 3720 阅读 · 0 评论 -
el-table设置固高
<el-table :data="tableData1" :height="550+'px'" style="width: 100%"><el-table>原创 2019-08-01 16:10:44 · 3635 阅读 · 0 评论 -
el-table添加 loading 效果
在el-table标签里面加如下代码,data里面自己定义pictLoading=false,加载数据之前设为true,加载完成之后设为false<el-table v-loading = "pictLoading" element-loading-background = "rgba(0, 0, 0, 0.5)" element-loading-...原创 2019-07-29 11:24:09 · 37776 阅读 · 5 评论 -
el-table改变行高
行高存在最小值把 height 和 padding 设置成0px,行高由内容决定(为内容的高)<el-table :data="djmxListData" :row-style="{height:0+'px'}" :cell-style="{padding:0+'px'}" style="width: 100%"></...原创 2019-07-26 15:18:50 · 11327 阅读 · 1 评论 -
vue table组件合并行++++对象数组多个字段排序sort
<el-table :data="djmxListData" :span-method="objectSpanMethod" style="width: 100%"> <el-table-column prop="fklx" label="测试列" width="50"&g...原创 2019-07-24 11:54:21 · 1942 阅读 · 1 评论 -
el-tree 懒加载时,符合指定条件时如何去掉下拉箭头
更改tree的defaultProps,在业务逻辑中给treeData添加属性leaf<el-tree ref="pdTree" node-key="pdbh" :load="loadChildrenNode" :highlight...原创 2019-08-20 11:40:40 · 5668 阅读 · 0 评论 -
el-tree render-content自定义文本
<el-tree ref="pdTree" :data="data" :render-content="renderContent"></el-tree><script> methods:{ renderContent(h, { ...原创 2019-08-20 11:44:57 · 3563 阅读 · 0 评论 -
实现vue el-input框加载自动选中,二次自动选中
<el-input ref="agin" v-select="true" v-model="insertInfoBcbd"></el-input>1、加载完成后默认为选中状态(选中和聚焦效果不能并存,insertInfoBcbd一定要赋予初始值,否则不能实现默认选中,只能默认聚焦)directives自定义指令,定义在data同级生命周期:bind:只调用一次...原创 2019-09-04 16:04:10 · 2388 阅读 · 0 评论 -
el-table 修改hover上去的背景颜色
.el-table--striped .el-table__body tr.el-table__row--striped.current-row td, .el-table__body tr.current-row>td, .el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table...原创 2019-09-18 15:50:21 · 2743 阅读 · 0 评论 -
el-input 限制输入框只能输入数字和小数
oninput =“value=value.replace(/[^\d]/g,’’)” //只能输入数字oninput =“value=value.replace(/[^0-9.]/g,’’)” //只能输入数字和小数<el-input v-model="sjje" oninput ="value=value.replace(/[^0-9.]/g,'')" class="money ...原创 2019-10-08 15:53:27 · 38323 阅读 · 11 评论 -
el-tree懒加载,每级渲染不同图标并且点击之后图标动态变化;实现局部层级刷新
效果图(每一层图标不同,并且打开和关闭状态的图标也不同) ------具体代码见最后------懒加载渲染不同图标并且点击之后图标动态变化实现局部层级刷新注意:如果你想局部刷新第2级,应该在node.level=1的条件里面存储node和resolve变量,因为这个条件代表的意思是 “ 点击第1级 , 渲染第2级 ”;同理,如果你想局部刷新第3级,那么就应该在node.level=...原创 2019-10-14 16:45:37 · 1231 阅读 · 1 评论 -
el-input 控制银行账号每4个数字用空格分割
<el-input v-model="PJJFform.cpBankZh" @input="cpBankZhFormat()"></el-input>methods:{ cpBankZhFormat:function () { this.PJJFform.cpBankZh=this.PJJFform.cpBankZh.replace(/\s/g, '').r...原创 2019-10-18 09:33:48 · 591 阅读 · 0 评论 -
el-tree 懒加载树(添加lazy)指定节点刷新
原博地址:https://www.cnblogs.com/heyefengyin/p/11430073.html亲测此方法可行找到对应的树节点,使用expand方法<el-tree lazy ref="asyncTree" :load="loadChildrenNode" //每一层的加载实现 逻辑代码 node-key="id"><...转载 2019-10-29 09:43:40 · 2253 阅读 · 0 评论 -
el-checkbox多选框在点击查询之后保留此次勾选状态(同时防止第二次点击查询的时候存储数组累加)
点击按钮后(勾选状态保留,不清空):方法:用yearCheck数组存每个勾选框的勾选状态,传接口参数的时候再根据yearCheck每个元素的值进行操作。<el-form ref="selForm" :model="selForm" :rules="rules" label-width="80px"> <el-form-item prop="flag"> ...原创 2019-12-05 15:40:32 · 1340 阅读 · 0 评论 -
el-checkbox 控制只能单选
<el-checkbox-group v-model="form.checkState"> <el-checkbox false-label='null' true-label="true" name="state">启用</el-checkbox> <el-checkbox false-label='null' true-label=...原创 2019-12-05 14:00:42 · 10742 阅读 · 7 评论 -
给el-table里面的按钮添加独立的loading效果
如图所示,需要在点击某一条数据的“查看”后,对应的状态变为loading。一开始我直接在button标签添加 :loading=‘btnLoading’ 点击之后把变量btnLoading变为true,发现这个方法有问题,会把其他行的“查看”全部变成loading。解决思路:重新处理一下数据,为每条数据添加btnLoading属性,默认值为false(属性名可以自定义,不一定非要是btnL...原创 2019-11-18 14:47:59 · 6476 阅读 · 13 评论 -
el-button 添加loading效果,并且显示不同的文字
<el-button type="primary" size="mini" icon="iconfont icon-filedone" :loading="loadingBtn"> {{loadingBtn?'搜索中':'搜索'}}</el-button>原创 2019-10-31 15:08:46 · 9811 阅读 · 0 评论 -
el-table selection多选框 实现 单选效果
1、首先把全选框给隐藏掉thead { .el-table-column--selection { .cell { display: none; } }}2、在@selection-change绑定的函数里面操作:当多选时,去除全部选择,勾选最后一个选项handleSelectionChange(val) { ...原创 2019-10-09 15:27:01 · 5326 阅读 · 10 评论 -
el-table、pl-table--------实现定位到某一行
*思路:找到表格中class含有.el-table__body-wrapper的元素,改变它的scrollToplet height = parseInt($(this.$refs.leftTable.$el).find('.el-table__body tbody td:first-child').height()) || 24; //获取行高this.$refs['leftTable'].setCurrentRow(this.leftTable[i]) //设置行高亮显示用pl-table:t原创 2020-05-13 14:47:08 · 3131 阅读 · 3 评论 -
el-footer可以把模块定位到底部
<el-footer> 版权所有 © xxxxxxxx 24小时客户服务热线:400-8879-597 </el-footer>原创 2020-05-13 14:34:57 · 3910 阅读 · 0 评论 -
el-tree 默认高亮显示指定的节点
<el-tree ref="tree" node-key="id" --必须定义 :data="treeData" highlight-current --高亮显示当前行 default-expand-all :props="defaultProps"></el-tree>接下来的...原创 2020-03-27 15:42:33 · 6058 阅读 · 1 评论 -
el-tree节点内容过长,设置横向滚动条时,内长外短,导致el-tree不能正常产生横向滚动条
是因为内节点没有把外面的父级撑宽,解决办法如下:.el-tree>.el-tree-node{ min-width:100%; display: inline-block;}原创 2020-03-06 15:15:43 · 1830 阅读 · 0 评论 -
el-table 添加“序号“列和分页时,控制后面几页的index不从1开始
给“序号”列添加 :index=“indexMethod”<el-table ref="table2" :data="tableData2" highlight-current-row style="width: 100%"> <el-table-column fixed ...原创 2020-03-05 11:08:13 · 901 阅读 · 0 评论 -
动态渲染el-table,并为某列数据添加跳转页面的功能
<el-table :data="tableData"> <el-table-column prop="yhbh" label="用户编号" width="120" fixed> <template slot-scope="scope"> <router-link :to="{path:'yh...原创 2020-03-04 15:26:39 · 960 阅读 · 0 评论 -
el-table 直接在el-table标签上设置表格内容居中
header-cell-style设置头部居中;cell-style设置单元格内容居中<el-table ref="table1" :data="tableData1" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" style="w...原创 2020-03-04 10:20:54 · 19814 阅读 · 6 评论 -
el-table 设置当前行,按回车键自动选中下一行
<el-input id="insertInfoBcbd" v-model="insertInfoBcbd"></el-input><el-table ref="table1" :data="tableData1" border highlight-current-row :row-class-name="table1RowC...原创 2020-03-03 15:39:17 · 2216 阅读 · 0 评论 -
vue-element-admin 管理系统框架(开源)
官网地址:vue-element-admin框架下载地址:GitHub下载地址原创 2021-03-09 15:03:21 · 555 阅读 · 0 评论 -
elementUI图片上传,并实现图片回显(正式上传服务器之前就能回显)
<el-upload class="avatar-uploader" :action="''" :auto-upload="false" //取消自动上传 :show-file-list="false" :on-change="handleAvatarChangeIcon"&...原创 2021-03-04 16:05:04 · 9738 阅读 · 5 评论