記一次element-plus中table操作列，template下el-popover會觸發elementplus隱藏bug(產生冗余的懸浮提示)，以及折衷解決方法。

<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"
            >...

</template>

,但不能解決問題，偶然間，挪動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>