随笔 - 1  文章 - 0  评论 - 0  阅读 - 3237

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不会消失
posted on   回龙观机车靓仔  阅读(3237)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示