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不会消失
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」