快捷導(dǎo)航

table表格中使用el-popover 無效問題解決方法

更新時(shí)間：2024年01月05日 11:11:21 作者：顧辰呀

這篇文章主要介紹了table表格中使用el-popover 無效問題解決方法,實(shí)例只針對單個(gè)的按鈕管用在表格里每一列都有el-popover相當(dāng)于是v-for遍歷了所以我們在觸發(fā)按鈕的時(shí)候并不是單個(gè)的觸發(fā)某一個(gè),需要的朋友可以參考下

table表格中使用el-popover 無效問題解決方法

實(shí)例只針對單個(gè)的按鈕管用在表格里每一列都有el-popover相當(dāng)于是v-for遍歷了所以我們在觸發(fā)按鈕的時(shí)候并不是單個(gè)的觸發(fā)某一個(gè)

主要執(zhí)行代碼

<el-popover placement="left" :ref="`popover-${scope.$index}`"> 動態(tài)綁定了ref

關(guān)閉彈窗執(zhí)行deltaskList

  <el-table-column align="center" label="操作" fixed="right" width="300px">
          <!-- v-buttonShow="5010403" -->
          <template slot-scope="scope">
            <el-popover placement="left" :ref="`popover-${scope.$index}`">
              <div style="border-bottom: 1px solid #ebeef5; margin-bottom: 10px; padding-bottom: 6px">設(shè)置賬期</div>
              <div style="display: flex; flex-direction: column">
                僅記錄賬期，并不會影響出賬流程~
                <el-select
                  v-model="setAccountVal"
                  clearable
                  filterable
                  placeholder="請選擇結(jié)算方式"
                  style="width: 260px; margin-top: 15px"
                  size="small"
                >
                  <el-option
                    v-for="(item, index) in paymentTermsList"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
              <div style="text-align: right; margin: 0px; margin-top: 15px">
                <el-button type="text" @click="deltaskList(scope.$index)">取消 </el-button>
                <el-button size="small" type="primary" @click="popConfirmSub(scope.$index)">確定 </el-button>
              </div>
              <el-button
                style="margin-left: 10px"
                slot="reference"
                type="text"
                v-if="mode == '0'"
                @click="setAccountBtn(scope.row)"
                >設(shè)置賬期</el-button
              >
            </el-popover>
          </template>
        </el-table-column>
    // 設(shè)置賬期
    setAccountBtn (row, index) {
      let findItem = this.paymentTermsList.find((item) => item.name === row.paymentTerms)
      this.setAccountVal = findItem.value
      this.setAccountBtnRow = row
    },
    // 確定
    async popConfirmSub (index) {
      if (this.setAccountVal === '') return this.$message.error('請選擇賬期')
      await newFranchiseeCustomerPaymentTermsEdit({
        orgOwner: this.setAccountBtnRow.orgOwner,
        paymentTerms: this.setAccountVal
      })
      this.$message.success('操作成功')
      this.deltaskList(index)
      this.querySubmit(1)
    },
    // 取消
    deltaskList (index) {
      this.$refs[`popover-${index}`].doClose()
    }

el-popover無法彈出的問題解決

1、不能再el-popover上?使?v-if進(jìn)?顯?隱藏，應(yīng)該?v-show
2、在每?個(gè)el-popover上都增加?個(gè)ref確定每個(gè)el-popover都是唯?的，
:ref="`node-popover-${scope.row.id}`"
3、需要使?slot="reference"定義由哪個(gè)元素觸發(fā)事件。

除此之外，還有一種特殊情況就是在table使用el-popover也可能會無法彈出，原因是在table中如果有兩行的key是相同的，那么table就不會對這一行再進(jìn)行一次渲染，如果第一行沒有使用到el-popover組件，那么與它key相同的所有行都不會再進(jìn)行渲染。

所以，再table中使用el-popover時(shí)，一定要保證每一行的key都是唯一的。

到此這篇關(guān)于table表格中使用el-popover 無效問題解決方法的文章就介紹到這了,更多相關(guān)table表格 el-popover 無效問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: