關於element-ui prpover懸浮彈窗定位問題和不穩定性


如題:需求使用懸浮彈窗,彈窗內嵌el-tabel表格問題

1、鼠標懸浮是有時沒有彈窗出現

2、彈窗的定位錯亂

// 表格中嵌套懸浮表格彈窗
<el-table-column align="center" label="篩選項" width="350">
    <template slot-scope="scope">
    <el-popover placement="top" width="700" trigger="hover">
        <el-table :data="scope.row.screening" border>
          <el-table-column property="id" label="篩選項ID" width="80" align="center"></el-table-column>
          <el-table-column property="text" label="篩選項" width="192" align="center"></el-table-column>
          <el-table-column property="value" label="篩選值" width="400" align="center"></el-table-column>
        </el-table>
        <div slot="reference">
          <div style="width:100%;height:100%;">
              <p v-for="(item, index) in scope.row.screening" :key="index">{{item.text}}</p>
          </div>
        </div>
    </el-popover>
    </template>
</el-table-column>

如上述代碼,標記重點,

1、錯位問題因為彈窗的整體寬度和列寬沒有明確標明,因此需要寫死,並且顯示位置placement 最好是top或者bottom,選擇空間預留大的方位

2、完成第一步基本沒有顯示失效狀態,不放心的話可以將懸浮目標擴大到整個單元格,div style="width:100%;height:100%;"


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM