问题

列表做申请退款功能，用到了el-popover，但是有很多个el-popover，如果使用它的属性visible，所有el-popover都会弹出。

解决

使用 :ref="getRefundRef"  函数给列表里的所有popover形成一个数组(每一个popover都是单独的值)，点击按钮，对应的popover会自动弹框

取消弹框时调用cancelApplyRefund函数，调用popover自身携带的 .hide()隐藏弹框

代码

<el-popover
                placement="top-start"
                title="申请退款"
                :width="200"
                :ref="getRefundRef"
                @show="showRefundPopover(scope.row)"
                trigger="click"
              >
                <div>
                  <el-input
                    type="textarea"
                    v-model="applyRefundReason"
                    placeholder="请输入申请退款原因"
                    style="margin-top: 10px; margin-bottom: 10px"
                  />
                </div>
                <div style="text-align: right; margin: 0">
                  <el-button size="small" text @click="cancelApplyRefund(scope)">取消</el-button>
                  <el-button size="small" type="primary" @click="applyRefund(scope.row)">
                    确定
                  </el-button>
                </div>
                <template #reference>
                  <el-button type="primary" text>申请退款</el-button>
                </template>
              </el-popover>
/* 申请退款的数据和函数 */
const applyRefundReason = ref('')
const getApplyRefundReason = ref([])
const getRefundRef = (el) => {
  if (el) {
    getApplyRefundReason.value.push(el)
  }
}
const showRefundPopover = (row) => {
  //弹框显示时调用的函数
}
/* 取消退款 */
const cancelApplyRefund = async (e) => {
  getApplyRefundReason.value[e.$index].hide()
}
/* 申请退款按钮 */
const applyRefund = async (row) => {

  try {
    if (row.refundStatus == 1) {
      ElMessage({
        message: '已经在申请退款中~',
        type: 'info'
      })
      return
    }
    ElMessageBox.confirm('确认要申请退款吗', '申请退款', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      //发起退款
      let data = {
        id: row.id,
        refundReason: applyRefundReason.value
      }
      await ToufangApi.requestRefund(data)
      ElMessage({
        message: '申请退款成功',
        type: 'success'
      })
      // 刷新列表
      await getList()
    })
  } catch {}
}

效果展示

弹框并不会影响到下面的popover