问题背景:需求是el-tree中的每个树节点后都有一个按钮,点击触发el-popover的显示,但是由click触发的el-popover,在点击下一个节点时,之前的都不消失。
解决办法:注:最主要的就是:ref="`data-type-${data.id}`"这句
<el-popover:ref="`data-type-${data.id}`"popper-class="common-popover"placement="right"trigger="click":tabindex="data.id"><divslot="reference"class="data-type-text"type="text"size="mini":title="data.data_type":class="[data.data_type + '-text']"@click="handleOpenDataOptions(`data-type-${data.id}`)"><span>{{ data.data_type }}</span></div></el-popover>
// 点击popover所在按钮触发的事件,保证同一时间只有一个popover显示handleOpenDataOptions(ref) {Object.keys(this.$refs).forEach((key) => {if (key != ref &&key.includes("data-type-") &&this.$refs[key].showPopper) {// 检测到有其他popover显示时,将其他popover关闭this.$nextTick(() => {this.$refs[key].doClose();});}});},