Antd vue 弹出框（Select, Tooltip, Menu 等等）渲染父节点

原创已于 2023-02-22 11:38:11 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-02-22 11:36:35 首次发布

antd vue 专栏收录该内容

6 篇文章

订阅专栏

需求：在table表格的表头，hover上去展示弹出问题：由于table设置了超出隐藏，导致弹窗展示不全或无法展示

解决：使用antd vue的全局化配置（getPopupContainer属性）

具体实现代码：

<template>
	<div ref="box">
		<a-table 此处省略属性配置>
		<-- 这个是自定义表头，具体需要在columns配置 -->
		<template #customTitle>
                <a-popover title="Title" placement="top" :getPopupContainer="(triggerNode) => box">
                  <template #content>
                    <p>12345</p>
                    <p>12345</p>
                  </template>
                  <span>Hover me</span>
                </a-popover>
              </template>
		</a-table>
	</div>
</template>
<script>
	
import { defineComponent, ref, getCurrentInstance} from 'vue';
export default defineComponent({
  setup() {
  	const box = ref(null);
  	return{
  		box,
  	}
  }
})
</scrirpt>