![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
element-ui
棠樾
夫君子之行,静以修身,俭以养德。非淡泊无以明志,非宁静无以致远。
展开
-
element-ui 组件图标全变成方框解决方法
问题:element-ui中的icon都变成了框。原创 2022-09-23 09:31:26 · 2177 阅读 · 0 评论 -
element-ui 表单验证只验证一项或者去掉某一项的验证?
原创 2022-01-15 11:59:28 · 1145 阅读 · 0 评论 -
element-ui自定义验证规则
/** * 验证邮箱 * @params:rule */var checkEmail = (rule, value, callback) => { //验证邮箱的正则 const regEmail = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/ if (regEmail.test(value)) { //合法邮箱 return callback() } callb.原创 2022-01-14 16:21:49 · 301 阅读 · 0 评论 -
element-ui table 表头文字不换行,文字过长点点...展示,同时给表头添加悬浮提示...
表头文字不换行超过点点...展示给表头添加悬浮提示在element中的table对slot-scope的值封装成了一个大的对象,对象里面有属性row(行),column(列),$index(索引),store,所以我们可以通过scope.row、scope.column、scope.$index拿到对应的值。本文参考:https://blog.csdn.net/qq_326...原创 2021-01-15 14:24:00 · 960 阅读 · 0 评论 -
el-tree中获取选中节点的所有父级节点
需求:项目中需要一个产品目录树形图,点击树形节点时,会把当前选中节点的所有父级节点信息带到左侧的搜索框中解决方法:使用node-click事件函数// 点击节点nodeClick(e) { const { tree } = this.$refs; // 选中节点的所有父级id和codeItem信息 this.parentList = {}; this.sear...原创 2020-12-15 15:57:00 · 3000 阅读 · 0 评论 -
element-ui el-table 选择框禁止选中
根据API 里面有个Table-column Attributes原创 2020-12-16 16:54:00 · 237 阅读 · 0 评论 -
element-ui el-table 中使用 el-form 添加校验
项目需求:在表格中的输入框,下拉选择框是必填,提交时校验,表格的行可以添加和删除,删除时改行的校验也删除实现方案:在需要校验的模块外面加上el-form代码如下:注意点都在图中标注了...原创 2020-11-09 16:49:00 · 296 阅读 · 0 评论 -
element table中给表头字段添加*号
想要实现如下效果:方法:使用自定义表头element-ui API如下:代码如下:原创 2020-10-22 16:57:00 · 202 阅读 · 0 评论 -
使用element的分页组件,实现前端分页
需求:批量创建门店,要求导入的门店数量不超过1000个,由于需要对门店进行编辑,和后台的复杂度,要求不分页。但是当导入的门店数量在900条往后时需要15 秒左右才能把页面渲染出来,很慢。所以需要前端做分页。思路:根据请求接口得到的数据和分页展示的条数计算出有多少页补充:项目中批量发货页面中也有类似前端分页需求,不同的是批量发货页面中的接口请求返回的是一个二维数组,前端页面展示也是表格...原创 2020-10-26 10:14:00 · 79 阅读 · 0 评论 -
Element-ui input 输入框限制只能输入数字并且限制长度的问题
<el-input v-model='count' oninput="value=value.replace(/[^\d]/g,'')" maxLength='9'/>原创 2020-09-03 17:27:00 · 854 阅读 · 0 评论 -
关于 element-ui 的隐藏组件el-scrollbar
在官方文档中没有给出这个组件,但是在源码中是有的。所以我们可以直接使用:<el-scrollbar></el-scrollbar>举个例子:(高度随内容自适应)<html> <body> <div style='height:100%'> <el-scrollbar cl...原创 2020-09-07 17:25:00 · 120 阅读 · 0 评论 -
element-ui中table中使用checkBox实现单选功能
需求:在表格的第一列加上checkBox选择框,并实现表格的单选功能首先采用element API中的多选属性,利用多选把它改成单选.HTML代码如下: 添加一列col type=selection<!-- 表格区域 --><el-table v-if="focusTableFlag" ref="multipleTable" :data="...原创 2020-09-09 11:19:00 · 1721 阅读 · 0 评论 -
element ui cascader 动态加载回显问题解决方法
问题:请求接口获取数据,重新给cascader赋值时,页面不显示新获得数据。解决方法:只要重新加载下cascader组件就行.<el-cascader v-if="isShowInfo" // 添加v-if v-model="scope.row.roleIds" :options="scope.row.roleInfo" :props="{ che...原创 2020-09-27 21:19:00 · 585 阅读 · 2 评论 -
解决element-ui e-table表格中使用多选,当翻页时已选中的数据丢失
使用element-ui中的table时,当有多选又有翻页功能时,点击翻页后之前选中的数据丢失,怎么使表格具有记忆功能呢element-ui API中有几个属性可以供我们完美解决这个问题1.单元格的属性和方法:2.表格的方法:另外补充:在表格中使用select方法可以判断当前行是否选中...原创 2020-07-01 16:52:00 · 678 阅读 · 0 评论 -
element-ui el-table调整行高的方法
根据element-ui 的API中的属性缩小:行高到一定程度之后便不能缩小升高:开发中没试过最大多少,但行高的高度完全可以调到自己适合的高度cell-style="padding:0"这列有的园主说可以不用加,只是在缩小到最小不能再缩的时候加,但是我在做的时候不加这个属性完全不起效果 ,所以我缩小行高到45px的时候也要加上主要是这两句代码:row-style="{heigh...原创 2020-07-20 14:37:00 · 3591 阅读 · 0 评论 -
element-ui的table组件,给某些列设置了fixed属性后,滚动条无法拖动
问题:在使用element-ui的table组件时,给表格的某些列设置了fixed属性,让列可以固定,不随着滚动条滚动移动,结果发现设置后,拖动横向的滚动条的前半部分无法拖动。后来发现原因是设置了fixed属性的列(左侧的div)把滚动条覆盖了。解决办法:.el-table__fixed { height:auto !important; // 让固定列的高自适应,且设置!impo...原创 2020-07-24 11:43:00 · 354 阅读 · 0 评论 -
elementUI的table表头与内容错位的解决方案
body .el-table th.gutter{ display: table-cell!important;}原创 2021-01-25 10:35:00 · 119 阅读 · 0 评论