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

我這里使用了popover展示彈窗

代碼是刪減過(guò)的，為了更清楚地記錄，有些這里沒(méi)有用到的代碼就刪了

<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中），因?yàn)橐獜暮蠖双@取數(shù)據(jù)，所以在table加入鼠標(biāo)移入事件（@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ù)存儲(chǔ)在全局變量popoverData中，用:slot給彈窗內(nèi)容賦值。

3. 表格的內(nèi)容要展示在popover組件的外部div中，此時(shí)，要在這個(gè)外部div的標(biāo)簽內(nèi)寫"slot='reference'"。

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

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

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

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

7.熬到現(xiàn)在已經(jīng)過(guò)了兩天，popover顯示仍然有問(wèn)題，彈窗的div在popover上面，popover有自己的樣式，因此用自定義樣式:popper-class修改樣式，并且用全局變量vis控制顯示的時(shí)機(jī)，這里這樣寫會(huì)出現(xiàn)一個(gè)警告type check failed for prop "popperClass". Expected String, got Object 現(xiàn)在未解決，再加上修改了el-popover的樣式才能正常顯示，試著刪除pop-con樣式，但是刪了之后就會(huì)出現(xiàn)彈窗閃爍的問(wè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.最后一個(gè)問(wèn)題，popover自帶的小三角箭頭沒(méi)有改變其樣式，而且也挺影響美觀的，查了一下element-ui文檔，直接用visible-arrow就可以去掉。但是不可以直接賦值，要在前面加冒號(hào)綁定一個(gè)false值。關(guān)于冒號(hào)：vue中的冒號(hào)是v-bind的縮寫，加冒號(hào)的說(shuō)明后面是一個(gè)變量或表達(dá)式，沒(méi)加冒號(hào)的說(shuō)明后面就是一個(gè)字符串字面量。

到這里需求就完成了！

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

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

最新評(píng)論