element-plus popover组件嵌套tree组件

element-plus popover组件嵌套tree组件

需求是通过点击dialog弹出框中的输入框弹出tree组件进行多项父子嵌套的数据的选择。需求很简单，上代码：

 <template>
	<el-dialog  title="提示" v-model="dialogVisible">
	  <el-popover
	  placement="right"
	  :width="400"
	  trigger="click"
	>
	 <template #reference>
		 <el-input></elinput>
	 </template>
     <el-tree
       :data="categoryList"
       :props="categoryListTreeProps"
       node-key="categoryId"
       @current-change="categoryListTreeCurrentChangeHandle"
       :default-expand-all="false"
       :highlight-current="true"
       :expand-on-click-node="false"
       accordion
     />
	</el-popover>
  </el-dialog>
</template>

一运行，ok，并没有出现任何的异常，关掉dialog框再点开，就出事了。。。点击输入框之后本应该弹出的popover框没有弹出？页面每次刷新之后第一次点击输入框都可以正常唤起popover框，但是第二次点击之后popover框没有弹出来，浏览器也没有报错，这是为什么？关于这个问题，我大概有几个猜测的方向：

1. 打开dialog弹窗的时候，el-tree中的categoryList数据是否出现了破损。
2. input框中的click事件有没有被触发

关于猜想一，el-tree中的categoryList数据完整，未出现损坏，并且input框点击之后触发的内容换成了不需要网络请求的元素之后，还是会出现以上的问题，排除 ×； 关于猜想二，经过 f12调试，click的事件确实有被触发，页面上会生成类名为el-popover的div标签，标签生成了，但是页面上还是没有这个元素，咦？？应该是样式的问题了，display属性的值是block，z-index属性是2056，ok，既然display属性没问题，没有出现在页面上的原因看来是z-index的锅了。

页面刷新之后，第一次打开dialog框的z-index属性是2020，input框点击之后弹起的popover框z-index为2021，ok，这样popover框的层级在dialog框之上，没问题，第二打开dialog框，z-index属性变成了2023，而popover框z-index是2022，好家伙，popover框层级在dialog框之下，被dialog框盖住了！

问题确定了，现在只需要保证popover框的z-index始终比dialog框大就可以了，这里要注意的一点是，el-dialog上有append-to-body的属性，这个属性将dialog直接 插入至 body 元素上,所以不能通过外层元素定位到当前的dialog框，要想不污染其他dialog框中的el-popover的元素，这里需要采用给el-dialog添加custom-class的方式找到当前的dialog框。

//使用的时候自定义类名前加上.el-dialog
.el-dialog.tag_dialog .el-popover {
	z-index: 9999 !important;
}

当然还有一种方法，给popover添加自定类名：popper-class=“category_popover”。

.category_popover {
  z-index: 9999 !important;
}