Nested el-popover in el-table, the popover does not appear on the second click

113 views Asked by At

In the table, there is a column showing the order number, if the data does not have the order number, display the icon, click on it to display an input pop-up box. If there is an order number in the data it displays the order number, and also clicking on the order number brings up the input popup. I used the el-popover component of element-ui (version 2.15.6). enter image description here

The code implementation is as follows enter image description here

<el-table-column :label="$t('MyOrder.PurchaseOrder')" v-slot="scope">
  <el-popover
    placement="bottom"
    width="200"
    :key="scope.row.id"
    trigger="click"
    v-model="scope.row.visible">
    <div>
      <el-input
        v-model="inputThirdOrderNum"
        size="mini"
        :placeholder="$t('MyOrder.Optional')"
        style="width: 100%">
      </el-input>
      <div style="text-align: right; margin-top: 10px">
        <el-button size="mini" type="text" @click="cancel(scope.row)">
        {{ $t('Recharge.CancelAction') }}
        </el-button>
        <el-button type="primary" size="mini" @click="editThirdOrderNum(scope.row)">
        {{ $t('Submit') }}
        </el-button>
      </div>
    </div>
    <template #reference>
      <el-button
        v-if="scope.row.thirdOrderNum"
        type="text"
        size="mini"
        class="btn-popover"
        slot="reference"
        style="white-space: unset"
      >
       {{scope.row.thirdOrderNum}}
      </el-button>
      <i v-else class="el-icon-edit-outline icon-popover"></i>
    </template>
  </el-popover>
</el-table-column>

But there is a problem, when there is no order number in a row of data, the icon appears, I click the icon to fill in the order number, then the page shows the order number on this row, under normal circumstances, then click the order number that is shown, the popover popup box should appear. But after clicking on it, no popover box appears, there is no interaction on the page, only click on the browser refresh after clicking to come out with the popover popover box. Why is this?

When I change the v-if to v-show, the popover icon does not pop up at all, not even the first time.

0

There are 0 answers