可以通过以下步骤实现:

  1. 在数据列表中,为每一条数据添加一个唯一的id属性。

  2. 在van-swipe-cell组件中,使用该id属性作为唯一的key。

  3. 在van-swipe-cell组件的左侧添加一个删除按钮,点击删除按钮时触发一个方法。

  4. 在该方法中,弹出一个确认提示框,确认是否要删除该条数据。可以使用van-dialog组件实现提示框。

  5. 如果确认删除,调用删除数据的方法,并传入该条数据的id。

  6. 在删除数据的方法中,根据传入的id找到对应的数据,并从数据列表中移除该条数据。

下面是一个示例代码:

<template>
  <div>
    <van-list>
      <van-swipe-cell v-for="item in dataList" :key="item.id">
        <!-- 左侧删除按钮 -->
        <template #left>
          <van-button type="danger" text="删除" @click="showConfirm(item.id)" />
        </template>
        <!-- 右侧内容 -->
        <div>{{ item.name }}</div>
      </van-swipe-cell>
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { id: 1, name: '数据1' },
        { id: 2, name: '数据2' },
        { id: 3, name: '数据3' },
        // ...
      ],
    };
  },
  methods: {
    showConfirm(id) {
      this.$dialog.confirm({
        title: '确认删除',
        message: '确定要删除该条数据吗?',
      })
        .then(() => {
          // 点击确定删除
          this.deleteData(id);
        })
        .catch(() => {
          // 点击取消
        });
    },
    deleteData(id) {
      // 查找对应的数据索引
      const index = this.dataList.findIndex(item => item.id === id);
      if (index !== -1) {
        // 从数据列表中移除该条数据
        this.dataList.splice(index, 1);
      }
    },
  },
};
</script>

这样,当用户左滑某一条数据,并点击删除按钮时,会弹出确认提示框,确认删除后会调用删除数据的方法,从而删除该条数据

vant List列表van-swipe-cell左滑根据这一条数据的id删除有提示确认要删除后点击确定删除

原文地址: https://www.cveoy.top/t/topic/iMSd 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录