由于開發(fā)需求，需要在el-table某一列增加popover彈窗，當用戶點擊按鈕時，通過popover組件展示詳細信息。參考Element-ui官網(wǎng)文檔案例，得出代碼如下

<el-table-column prop="sip,sip_location" label="源IP" width="150">
 <template slot-scope="scope">
    <div>
      {{ scope.row.sip }}
      <el-popover
        placement="right"
        width="500px"
        :visible="IPDetailsPop"
        popper-class="IPDetailsPopover"
      >
        <IPDetails ref="ipdetails" :info="info"/>
        <el-button
          type="text"
          icon="el-icon-search"
          slot="reference"
          @click="toggleIPDetailsDialog(scope.$index,'sip')"
        >
        </el-button>
      </el-popover>
    </div>
    <div v-for="item in scope.row.sip_location" :key="item">
       <div style="margin-bottom:2px">
        <el-tag effect="dark" color="#199fc7" size="mini" span="2" style="width:100%">{{
          item
        }}</el-tag>
      </div> 
    </div>
  </template>
</el-table-column>

具體實現(xiàn)細節(jié)無需關(guān)注，經(jīng)過測試后表格第一頁的popover組件能夠正常顯示，但是當翻到第二頁時，點擊詳情按鈕，函數(shù)能夠被正常執(zhí)行，數(shù)據(jù)也按照指定格式解析，但是popover組件無法顯示。此時返回到第一頁后，第一頁的popover組件也無法顯示了。
參考文章（https://juejin.cn/post/7200571354927939645#comment）中對組件復(fù)用問題的描述與解釋，在el-popover添加v-if判斷條件成功將問題解決，即當沒有詳細數(shù)據(jù)要展示的時候，不渲染popover組件。文章來源地址http://www.zghlxwxcb.cn/news/detail-511093.html

<el-table-column prop="sip,sip_location" label="源IP" width="150">
 <template slot-scope="scope">
    <div>
      {{ scope.row.sip }}
      <el-popover
        placement="right"
        width="500px"
        :visible="IPDetailsPop"
        v-if="Object.keys(scope.row.sip_add).length>0"
        popper-class="IPDetailsPopover"
      >
        <IPDetails ref="ipdetails" :info="info"/>
        <el-button
          type="text"
          icon="el-icon-search"
          slot="reference"
          @click="toggleIPDetailsDialog(scope.$index,'sip')"
        >
        </el-button>
      </el-popover>
    </div>
    <div v-for="item in scope.row.sip_location" :key="item">
       <div style="margin-bottom:2px">
        <el-tag effect="dark" color="#199fc7" size="mini" span="2" style="width:100%">{{
          item
        }}</el-tag>
      </div> 
    </div>
  </template>
</el-table-column>

到了這里，關(guān)于Element-UI中el-table內(nèi)嵌el-popover，在表格翻頁后el-popover無法顯示問題解決的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！