Element-UI表格嵌入popover遇到的問題及解決方案

更新時間：2023年11月22日 10:14:04 作者：云朵棲月

在表格中我們通常需要在每一行的一些單元格中顯示popover,這篇文章主要給大家介紹了關于Element-UI表格嵌入popover遇到的問題及解決方案,需要的朋友可以參考下

最近幾天遇到一個比較棘手的問題，需求是在觸發(fā)表格某一列的cell，彈窗展示新的數(shù)據(jù)（不是表格內的數(shù)據(jù)，而是需要重新向后端請求）

我這里使用了popover展示彈窗

代碼是刪減過的，為了更清楚地記錄，有些這里沒有用到的代碼就刪了

<el-table :data="tableData" @cell-mouse-enter="cellEnter">
    <el-table-column
        prop="one"
        label="第一列"
        align="center">
        <template scope="scope">
            <el-popover
                 id="popover1"
                 trigger="hover"
                 placement="right"
                 :visible-arrow="false"
                 :slot= popoverData
                 :ref= "`popover1` + scope.$index"
                 :popper-class= "{'pop-con' : vis !== true}">
                 <div v-if="vis === true" class="tips-con">
                      <p>事件1：{{popoverData.satisfied}}件</p>
                      <p>事件1：{{popoverData.general}}件</p>
                      <p>事件3：{{popoverData.basically}}件</p>
                      <p>事件4：{{popoverData.dissatisfied}}件</p>
                 </div>
                 <div class="name-wrapper" slot="reference"
                       @mouseenter="openAction(scope.$index)"
                       @mouseleave="cancelAction(scope.$index)">
                       {{ scope.row.one }}
                 </div>
             </el-popover>
          </template>
    </el-table-column>
</el-table>

1. 觸發(fā)方式是hover（寫在popover的trigger中），因為要從后端獲取數(shù)據(jù)，所以在table加入鼠標移入事件（@cell-mouse-enter）。

cellEnter(row, column){
    if(column.label === "第一行"){
          this.popoverData = [];
          this.vis = false;
          this.$axios({
              method: "post",
              url: "XXXX/getPopoverData.action",
              data: {
                  one: row.one
              }
           }).then((res) => {
               this.popoverData = res.data.content.result.data;
               this.vis = true;
           })
     }
},

2. 獲取的數(shù)據(jù)存儲在全局變量popoverData中，用:slot給彈窗內容賦值。

3. 表格的內容要展示在popover組件的外部div中，此時，要在這個外部div的標簽內寫"slot='reference'"。

4. 由于是在表格內，每一個cell都共用一個popover，鼠標快速滑入幾個cell時，會出現(xiàn)多個popover同時出現(xiàn)的情況，非常影響用戶體驗，因此，給popover加入唯一標識，用:ref來綁定scope.$index來實現(xiàn)。

5. 此時出現(xiàn)了一個問題，鼠標初次滑入第一個cell顯示正常，滑入下一行cell時會出現(xiàn)popover先為空閃爍一下，然后才顯示數(shù)據(jù)。因此，在顯示表格內容的外部div設置了鼠標移入移出時的事件@mouseenter和@moueleave，用$refs在鼠標移入時執(zhí)行doShow()方法，移出時執(zhí)行doClose方法。

cancelAction(index){
    let refName = "popover1" + index;
    this.$refs[refName].doClose();
},
openAction(index){
    let refName = "popover1" + index;
    this.$refs[refName].doShow();
},

6. 第5個問題還存在，在顯示彈窗的div中加入v-if語句控制，寫入全局變量vis，初始值為false，當數(shù)據(jù)為空時，vis為false不顯示，數(shù)據(jù)傳入時vis設為true，顯示，控制語句在第二個代碼塊的cellEnter方法中。

7.熬到現(xiàn)在已經(jīng)過了兩天，popover顯示仍然有問題，彈窗的div在popover上面，popover有自己的樣式，因此用自定義樣式:popper-class修改樣式，并且用全局變量vis控制顯示的時機，這里這樣寫會出現(xiàn)一個警告type check failed for prop "popperClass". Expected String, got Object 現(xiàn)在未解決，再加上修改了el-popover的樣式才能正常顯示，試著刪除pop-con樣式，但是刪了之后就會出現(xiàn)彈窗閃爍的問題。

.tips-con {
    background-color: #000000;
    font-size: 14px;
    border: 0px;
    opacity: 0.8;
    color: #ffffff;
}
.pop-con{
    display: none;
    background-color: #000000;
}
.el-popover {
    background-color: #000000;
    border: 0px;
}

8.最后一個問題，popover自帶的小三角箭頭沒有改變其樣式，而且也挺影響美觀的，查了一下element-ui文檔，直接用visible-arrow就可以去掉。但是不可以直接賦值，要在前面加冒號綁定一個false值。關于冒號：vue中的冒號是v-bind的縮寫，加冒號的說明后面是一個變量或表達式，沒加冒號的說明后面就是一個字符串字面量。

到這里需求就完成了！

總結：第一次接觸popover，還是有挺多東西的，需要系統(tǒng)學習一下vue，細節(jié)上的小問題其實不需要花太多時間來解決。

到此這篇關于Element-UI表格嵌入popover遇到的問題及解決方案的文章就介紹到這了,更多相關Element-UI表格嵌入popover內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: