記一次element-plus中table操作列，template下el-popover會觸發elementplus隱藏bug(產生冗餘的懸浮提示)，以及折衷解決方法。
阿新 • • 發佈：2021-07-29
<el-table
:data="tableDataList"
style="width: 100%"
v-loading="queryLoading"
>
<el-table-column type="expand">
<template #default="props">
<el-form
label-position="right"
inline
class="demo-table-expand"
label-width="auto"
>
<el-row>
<el-col :span="8">
<el-form-item label="表主鍵:">
<span>{{ props.row.id }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="所屬專案:">
<span>{{ props.row.projectDesc }}</span>
</el-form-item>
</el-col>
<!-- <el-col :span="8" >
<el-form-item label="所屬服務:">
<span>{{ props.row.serverName }}</span>
</el-form-item>
</el-col> -->
<el-col :span="8">
<el-form-item label="場景優先順序:">
<span>{{ props.row.scenarioGrade }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="場景名稱:">
<span>{{ props.row.scenarioName }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="場景型別:">
<span>{{ props.row.scenarioType }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="建立人:">
<span>{{ props.row.creator }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="建立時間:">
<span>{{ props.row.createTime }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="更新人:">
<span>{{ props.row.modifier }}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="修改時間:">
<span>{{ props.row.updateTime }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="場景描述:">
<span>{{ props.row.scenarioDesc }}</span>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
</el-table-column>
<el-table-column v-if="false" prop="id" label="表主鍵列">
</el-table-column>
<el-table-column
align="center"
label="序號"
type="index"
min-width="10%"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
header-align="center"
align="center"
prop="scenarioName"
label="場景名稱"
min-width="15%"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="projectDesc"
header-align="center"
align="center"
label="所屬專案"
min-width="15%"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="scenarioDesc"
header-align="center"
align="center"
label="場景描述"
min-width="15%"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="creator"
header-align="center"
align="center"
label="建立人"
min-width="15%"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="updateTime"
header-align="center"
align="center"
label="修改時間"
min-width="15%"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
label="操作"
min-width="25%"
show-overflow-tooltip
>
<template #default="scope">
<!-- <el-button @click="handleClick(scope.row,'edit')" type="primary" icon="el-icon-edit" circle size="small"></el-button> -->
<el-button
@click="handleClick(scope.row, 'edit')"
type="text"
icon="el-icon-edit"
circle
size="small"
>編輯</el-button
>
<template>
</template>
<el-popover
placement="top"
:width="300"
trigger="click"
v-model:popoverVisible="popoverVisible"
>
<el-row>
<el-col :span='8'>新場景名稱:</el-col>
<el-col :span="16"><el-input v-model="newScenarionName"></el-input></el-col>
</el-row>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="popoverVisible=false">取消</el-button>
<el-button size="mini" @click="handleClick(scope.row, 'copy')" >確定</el-button>
</div>
<template #reference>
<el-button type="text" @click="true" size="small" icon="el-icon-document-copy">複製</el-button>
</template>
</el-popover>
<el-button
@click="handleClick(scope.row, 'del')"
type="text"
icon="el-icon-delete"
circle
size="small"
>刪除</el-button
>
<el-dropdown
trigger="click"
size="mini"
type="primary"
@command="handleCommand"
>
<el-button
type="text"
size="small"
circle
@click="handleClick(scope.row, 'run')"
>
執行<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="1" icon="el-icon-caret-right"
>dev</el-dropdown-item
>
<el-dropdown-item command="2" icon="el-icon-caret-right"
>test</el-dropdown-item
>
<el-dropdown-item command="3" icon="el-icon-caret-right"
>stagging</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</el-table-column>
</el-table>
以上是表格html部分的完整程式碼，因為點選複製按鈕時，想在複製按鈕附件出現彈窗，輸入相應資訊然後點提交，所以沒采用普通的el-button+el-dialog的方式。
但是使用el-popover時卻發現，卻發現，總是會出現冗餘的提示。
把複製按鈕所在的el-popover標籤挪動順序等都不行，最終偶然的條件下，在“複製”按鈕所在的el-popover標籤前面，懷疑是el-popover所在的父標籤
<template #default="scope">產生了影響，起初是直接在該<template #default="scope">下新建<template><el-popover
placement="top"
:width="300"
trigger="click"
v-model:popoverVisible="popoverVisible"
>...,但不能解決問題，偶然間，挪動el-popover的位置，並在前面又空<template></template>，即可解決懸浮提示，且注意，複製按鈕所在不可以在操作列第一個位置，否則依然會出現懸浮提示。
解決後，滑鼠再放置操作列時不會再遇到懸浮提示。
解決方法單獨摘取出來
<template>
</template>
<el-popover
placement="top"
:width="300"
trigger="click"
v-model:popoverVisible="popoverVisible"
>
<el-row>
<el-col :span='8'>新場景名稱:</el-col>
<el-col :span="16"><el-input v-model="newScenarionName"></el-input></el-col>
</el-row>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="popoverVisible=false">取消</el-button>
<el-button size="mini" @click="handleClick(scope.row, 'copy')" >確定</el-button>
</div>
<template #reference>
<el-button type="text" @click="true" size="small" icon="el-icon-document-copy">複製</el-button>
</template>
</el-popover>