vant List列表van-swipe-cell左滑根据这一条数据的id删除有提示确认要删除后点击确定删除
可以通过以下步骤实现:
-
在数据列表中,为每一条数据添加一个唯一的id属性。
-
在van-swipe-cell组件中,使用该id属性作为唯一的key。
-
在van-swipe-cell组件的左侧添加一个删除按钮,点击删除按钮时触发一个方法。
-
在该方法中,弹出一个确认提示框,确认是否要删除该条数据。可以使用van-dialog组件实现提示框。
-
如果确认删除,调用删除数据的方法,并传入该条数据的id。
-
在删除数据的方法中,根据传入的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>
这样,当用户左滑某一条数据,并点击删除按钮时,会弹出确认提示框,确认删除后会调用删除数据的方法,从而删除该条数据
原文地址: https://www.cveoy.top/t/topic/iMSd 著作权归作者所有。请勿转载和采集!