记录elementUI el-popover的使用以及el-popove的关闭问题

记录elementUI el-popover的使用。
这里我使用的是umyUI的虚拟表格+el-popover，想要的效果是：点击表格的行数据显示我想要的菜单。
先题图，看效果，
直接贴代码

<ux-gridclass="analysis-table"ref="reportTable":data="analysisReportData.showReportData"size="mini"border:height="tabsHeight"header-row-class-name="row-header row-header-height"show-header-overflow="tooltip"show-overflow="tooltip":row-class-name="CJS.tableRowClassName"@cell-click="cellClick"@header-dragend="headerWidthChange"><template v-for="head in analysisReportData.showReportHead"><ux-table-columnwidth="140":key="head.prop":field="head.prop":title="head.label"resizablesortable:sort-method="(prevRow, nexRow) => CJS.tableSortMethod(prevRow, nexRow, head.prop)":filters="[{ data: '' }]":filter-method="CJS.filterScreenMethod"><template v-slot:filter="{ $panel, column }"><el-inputtype="type"class="filter_input"size="small"v-for="(option, index) in column.filters":key="index"v-model="option.data"@input="$panel.changeOption($event, option.data, option)"></el-input></template><template v-slot="scope"><el-popovertrigger="click"placement="bottom"popper-class="popper-class"width="120"><ul class="popover-menu"><li class="menu_item" @click="rowColumnClick('row')">图形分析行</li><li class="menu_item" @click="rowColumnClick('column')">图形分析列</li></ul><div slot="reference" style="width: 100%; height: 24px;">{{scope.row[head.prop]}}</div></el-popover></template></ux-table-column></template></ux-grid>

el-popover用的触动方式是‘click’，
想要的效果实现了，但是又遇到问题了，就是点击菜单的时候，el-popover 没有关闭。
使用doClose()和设置v-model=false 都没有效果，
我的解决方法是：在点击菜单的时候，模拟一个点击事件，这样就可以关闭了。

document.body.click()

记录elementUI el-popover的使用以及el-popove的关闭问题相关推荐

js去el的map_转：el表达式获取map对象的内容 js中使用el表达式 js 中使用jstl 实现 session.removeattribute...
原文链接: 总结: el表达式获取map对象的内容后端: HashMap map1 = new HashMap(); map1.put("key1","lzsb&quo ...
JSP、EL和JSTL-学习笔记03【EL介绍和运算符、EL获取域中存储的数据】
Java后端学习路线笔记汇总表[黑马程序员] JSP.EL和JSTL-学习笔记01[JSP基础语法] JSP.EL和JSTL-学习笔记02[MVC] JSP.EL和JSTL-学习笔记03[EL介绍 ...
[element-ui] 手动控制 popover 弹层的显示与隐藏
ElementUI并没有给我们明确控制popover弹层显示与关闭状态的方法,但是通过ref获取元素之后发现,元素上面已经内置关闭和打开的方法 <el-popover ref="pop ...
javax.el.ELException: Provider com.sun.el.ExpressionFactoryImpl not found
出现这种错误,主要是jar冲突了. 把tomcat下得关于el的jar包(el-api.jar,juel-api.jar,juel-impl.jar,juel- engine.jar)都删掉. 然后在 ...
html中el表达式遍历list,使用EL表达式访问集合
在 EL 表达式中,同样可以获取集合的数据,这些集合可能是 Vector.List.Map.数组等.可以在 JSP 中获取这些对象,继而显示其中的内容,其语法格式如下: ${collection [序 ...
记录element-ui级联选择器，二级三级列表无法显示的解决办法
<el-cascader expand-trigger="hover" :options="catelist& ...
ElementUI手动控制popover弹层的显示与隐藏
是时候表演真正的技术了网上找了一堆都是没用的....搜的第一个是啥也没说手动控制el-popover弹窗的显示与隐藏其实很简单,el-popover层绑定一个v-model的值为true或者fal ...
ElementUI解决循环出多个Popover点击其中一个则其他关闭
最近做项目遇到的一个问题需要右击显示操作菜单,但是循环出来的el-Popover,右击其中一个时,其他显示的Popover并不会关闭,需求是同一时间右击只显示一个菜单 ** 解决: ** Popov ...
如何手动关闭elementUI的popover
在开发的过程中,有需要点击popover中的按钮,然后触发click事件,走完流程之后要关闭popover. 查询了element的文档里,也没有相关的事件于是搜了一下,可以用以下的方法来解决我在 ...

记录elementUI el-popover的使用以及el-popove的关闭问题

记录elementUI el-popover的使用以及el-popove的关闭问题相关推荐

最新文章

热门文章