Skip to content

动态获取列表项 ref 实例

方式1

vue
<template>
<van-swipe-cell :ref="(el) => setRef(el, e)" :name="e.id" v-for="(e, i) in list">
  <van-cell :border="false" :title="e.content_en" :label="e.content_zh" />
  <template #right>
    <van-button square type="danger" text="删除" @click="onClickDel(e, i)" />
    <van-button square type="primary" text="编辑" @click="onClickEdit(e, i)" />
  </template>
</van-swipe-cell>
</template>

<script setup>
const list = ref([]);
const swipeCellRefs = ref({})

function setRef(el, e) {
  if (el) {
    swipeCellRefs.value[e.id] = el;
  }
}

function onClickDel(e, i) {
  console.log(i, 'i');
  showConfirmDialog({
    title: '系统提示',
    message: '确认删除吗?',
  })
    .then(() => {
      // on confirm
      swipeCellRefs.value[e.id].close()
      list.value.splice(i, 1);
    })
    .catch(() => {
      // on cancel
    });
}
</script>