element-ui问题集锦

1、el-popover的显示和隐藏

HTML部分，trigger设为”manual”

<el-popover ref="popoverUsername" placement="top" width="200" trigger="manual" content="请输入账号名称"></el-popover>
<el-input v-popover:popoverUsername v-model="loginForm.username" class="username"></el-input>

JS部分

this.$refs['popoverUsername'].doShow();
this.$refs['popoverPassword'].doClose();

2、在表格中使用el-popover和el-input

HTML部分，ref使用变量

<el-table-column prop="wares_id" label="商品ID" align="center"><template scope="scope"><el-popover :ref="'popover_id_' + scope.row.id" trigger="click" placement="top" width="255"><div class="editTitle">编辑商品ID</div><hr><div class="editContent"><el-input v-model="scope.row.wares_id" class="edit" icon="circle-cross":id="'wares_id_' + scope.row.id" :on-icon-click="clearInput"></el-input><img src="/src/assets/sure.png" @click="modifyWares('wares_id', scope.row.id)"align="center"><img src="/src/assets/cancel.png" @click="cancelModifyWares('id', scope.row.id)"align="center"></div><el-button slot="reference" class="tableData" type="text"@click="getInputValue('wares_id', scope.row.id, scope.row.wares_id)">{{scope.row.wares_id}}</el-button></el-popover></template></el-table-column>

JS部分，用doClose()方法关闭el-popover

cancelModifyWares (str, id) {this.$refs['popover_' + str + '_' + id].doClose();
}

为el-input控件赋值，el-input是对input控件的封装，打印出el-input可以看到它就是一个div，里面放了一个input，所以为里面的input赋值即为为el-input赋值

getInputValue (field, id, value) {document.getElementById(field + '_' + id).getElementsByTagName("input")[0].value = value;
},

el-input控件里放一个清除icon，点击该icon，里面内容清空，可以将event打印出来，寻找其他方法

clearInput (event) {event.target.nextSibling.value = "";
},

3、el-table的层级问题

做项目时遇到个问题，点击某个按钮需要有弹窗，这个弹窗下有个半透明遮罩需要覆盖当前页面，但是偏偏el-table的下边框和右边框覆盖不了，为此百度了N久都不知道为什么，后来经高人指点，说给el-table加个z-index，于是我给弹窗、遮罩、el-table分别设了z-index，并且依次减小，问题解决了，非常感谢那位高人。本人思考了下，觉得可能是el-table这个大组件里嵌套了很多小组件，而这些小组件的z-index不一样。仅代表个人看法，如果不对，欢迎指出。

element-ui问题集锦相关推荐

charts混合使用 elementui和e_vue模块化(echart+element ui)
最近看了下vue的框架,随手做了个项目,记录分享下技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图主要是配置 ...
Vue HTML：在Vue上写Html遇到的一些问题，html的首行缩进，html的行间距，element UI的回到顶部不显示
Vue & HTML:在Vue上写Html遇到的一些问题,html的首行缩进,html的行间距,element UI的回到顶部不显示资源: HTML 教程- (HTML5 标准) 怎么快速上 ...
vue的$nextTick使用总结，this.$refs为undefined的解决办法，element Ui的树形控件setCheckedKeys方法无法使用
vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用参考文章: (1)vue的$nextTi ...
vue页面自适应屏幕宽高_Vue+Element UI 高度实时自适应
本文章是我一个实习两个月的练习生,在项目中遇到的问题,在此记录,防治以后再踩坑!! Element ui 本身使用的Container 布局容器,组件采用 flex 布局.所以用了它的布局就可以做到宽 ...
easyui前端实现多选框_前端：Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! "兴趣爱好:"> "form.checkList"> for= {{item ...
Element UI级联选择器(Cascader)获取级联对象
Element UI Cascader官网文档 GIF 代码: getCascaderObj = function(val, opt){return val.map(function (value, ...
vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
element ui走马灯怎么添加_Lovestu - Element UI 走马灯高度自适应
Element UI走马灯中,通过属性height来设置高度,但是设置就是死的,不能自适应.要自适应需要监控窗口宽度的变化. 网上别人分享的太复杂了,这儿有简单的方法实现高度自适应. 首先,确定图片的 ...
element ui 前台模板_用 Vue+ElementUI 搭建后台管理极简模板
本文由图雀社区成员https://blog.csdn.net/crxk_blog.csdn.net 写在前面此篇文章为一篇说明文档,不是教你从零构建一个后台管理系统,而是基于一个实际项目,已经搭建 ...

element-ui问题集锦

1、el-popover的显示和隐藏

2、在表格中使用el-popover和el-input

3、el-table的层级问题

element-ui问题集锦相关推荐

最新文章

热门文章