-
树形table问题
-
popover的取消问题
-
多个popover弹出（坑）
-
参照el-table的官方api
el-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都会显示。真是个大坑。暂时未找到解决方案，只好放弃固定操作列了。
项目需求，要求点击table后边的操作按钮，弹出修改框。但是又不是大弹框，设计的是带箭头的小弹框，于是想到了el-popover。但是碰到了坑，将解决过程记录下来问题树形table问题popover的取消问题...
纯JS
popover
组件，用于本机
关于本模块
原始的现在已过时，因此我决定发布自己的模块，以避免在package.json中使用github url。 在重写过程中有些东西丢失了，但是现在它使用了Modal和本机动画驱动程序，并且还具有可与Touchables一起使用的出色帮助器。 感谢@jeanregisser和悬挂PR的作者的代码。
以前（版本0.0.6 ），此模块要求react版本>16.2.0才能正常工作（对应于react-native版本>0.52.0 ）。
0.0.7版本不再需要React.Fragment ，因此您可以使用合理的旧版本的reac
import
Popover
from 'react-simple-
popover
' ;
import React , { Component } from 'react' ;
class
Popover
Demo extends Component {
constructor ( props ) {
super ( props ) ;
this . state = {
open : false
handleClick = ( e ) => {
this . setState ( { open : ! this . state . open } ) ;
handleC
项目中使用了i18n来解决国际化问题。碰到了警告：Cannot translate the value of keypath ‘stat
eL
ist.’. Use the value of keypath as default.
百度了下，发现大多数都是配置i18n不显示警告的方式来解决，这不是掩耳盗铃么。
检查了下代码，发现其实是个很简单的问题：
如图，我在s
el
ect中使用了i18n的$t函数...
在
el
-
table
的多列中使用
el
-
popover
可以通过在相应的
el
-
table
-column标签中设置
el
-
popover
的属性来实现。可以参考以下代码示例进行实现：
```html
<
el
-
table
>
<
el
-
table
-column lab
el
="列1">
<!-- 列1的内容 -->
</
el
-
table
-column>
<
el
-
table
-column lab
el
="列2">
<!-- 列2的内容 -->
<template slot-scope="scope">
<
el
-
popover
:ref="`
popover
-${scope.row.id}`" popper-class="
table
-list-popper" placement="left" width="200">
<!--
el
-
popover
的内容 -->
</
el
-
popover
>
</template>
</
el
-
table
-column>
<
el
-
table
-column lab
el
="列3">
<!-- 列3的内容 -->
</
el
-
table
-column>
</
el
-
table
>
在以上代码中，
el
-
popover
被放置在
el
-
table
-column的template标签中，通过slot-scope获取当前行的数据，使用ref属性来标识
el
-
popover
的引用。可以根据需要设置
el
-
popover
的其他属性，比如placement设置弹出框的位置，width设置弹出框的宽度等。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [解决
el
-
popover
嵌入表格多列显示和被表格遮挡的问题](https://blog.csdn.net/Smil
el
ifeeveryday/article/details/123247713)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [解决
el
-
table
中使用
el
-
popover
组件弹窗显示关闭问题](https://blog.csdn.net/qq_41623635/article/details/131254779)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
解决vue-i18n Cannot translate the value of keypath 'stateList.'. Use the value of keypath as default.
12711
