项目需求,要求点击table后边的操作按钮,弹出修改框。但是又不是大弹框,设计的是带箭头的小弹框,于是想到了el-popover。但是碰到了坑,将解决过程记录下来
-
问题
- 树形table问题
- popover的取消问题
- 多个popover弹出(坑)
-
解决
-
参照el-table的官方apiel-table 树形数据,返回的数据格式中,要携带一个自定义字段,字段内是子table。
支持树类型的数据的显示。当 row 中包含 children 字段时,被视为树形数据。渲染树形数据时,必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。
不过要注意自己的element-ui版本,我之前是element-ui@2.3.2版本,里边并不支持树形table,但是看了最新办的api网站,纠结了半天。所以一定要注意自己的element-ui版本,去官网对应是否支持树形table
-
popover的触发,刚开始是click触发,但是后来发现,只要一点击别的地方,popover就会自动隐藏,并不符合需求,然后查api,发现还有一种触发方式 trigger=“manual”,手动触发
<template> <el-popover placement="bottom" ref="elPopover" title="标题" width="200" trigger="manual" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。" v-model="visible"> <el-button slot="reference" @click="visible = !visible">手动激活</el-button> </el-popover> </template> <script> export default { data() { return { visible: false }; } }; </script>
指定一个变量,手动控制这个变量的状态,来达到控制显示隐藏。还有,在非‘manual’中,要控制其显示隐藏,可以通过ref来操作
this.$refs['elPopover'].doClose()
当时需求还没有修改的时候,要手动关闭弹框。然后在api中并没有发现这个函数,翻看源代码,在其中找到的。记录下。
-
多个弹框显示,这是个大坑,足足找了半天,按钮单击一次,结果却出现了两个popover,以为是key重复,检查发现并没有。写了一个单元测试,一个一个增加属性,发现是fiexed:right 导致的,仔细查看页面dom元素,发现了el-table的固定原理
-
生成了两个table,固定table会覆盖在基础table上方,所以使用fiexed的话,其实会有两个完全一样的table,我用id来帮顶popover显示隐藏,所以当点击其中一个button时,两个button对应的popover都会显示。真是个大坑。暂时未找到解决方案,只好放弃固定操作列了。