vue3 element plus el-table中使用el-popove弹出框在表格内显示多个的解决办法

<el-table-column label="兑奖权限控制" align="center">
          <template #default="{ row, $index }">
            <el-popover
              placement="bottom"
              :width="400"
              :ref="`cashVisible${$index}`"
              trigger="click"
            >
              <p class="font-bold text-xl">开启当前双色球游戏销售功能</p>
              <el-row :gutter="20" class="mb-4 mt-4">
                <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
                  >开启兑奖方式</span
                >
                <el-date-picker
                  v-model="stopSaleForm.stopCashDate"
                  :teleported="false"
                  type="date"
                  placeholder="关闭兑奖时间"
                />
              </el-row>
              <hr />
              <div class="mt-4 text-right">
                <el-button @click="updateCashStatusCancel($index)"
                  >即时生效</el-button
                >
                <el-button
                  type="primary"
                  @click="updateCashStatusConfirm($index)"
                  >确定调整</el-button
                >
              </div>
              <template #reference>
                <el-switch
                  :active-value="row.wager == 1 || row.wager == 3"
                  style="--el-switch-on-color: #1fd0a3"
                  class="ml-2"
                  :before-change="saleBeforeChange"
                />
              </template>
            </el-popover>
            <p>2022-4-12 10:00:00</p>
          </template>
        </el-table-column>

1. 添加ref属性,要用下标区分开,这样每一行生成的弹出框都是不一样的

2. 不使用visible / v-model:visible的属性

3. 点击关闭按钮,调用hide方法即可

const state = instance.getCurrentInstance(); 
(state.instance?.refs[`cashVisible${index}`] as any).hide(); //关闭弹窗

注意事项：

 <template #default="{ row, $index }"> 获取单条数据用{row}
:ref="`cashVisible${$index}`"
el-date-picker中设置:teleported="false"，选择日期后popover不会消失