Vant2滑动删除

Vant2 提供了一个 SwipeCell 组件来实现滑动删除的功能，你可以在需要实现滑动删除的地方引入 SwipeCell 组件，并传入相应的数据和参数即可。

示例代码：

<template>
  <van-list>
    <van-swipe-cell
      v-for="(item, index) in list"
      :key="index"
      :left-width="60"
      :right-width="60"
      :disabled="item.disabled"
      @click="onClick(item)"
    >
      <div class="list-item">{{ item.name }}</div>
      <div slot="right" class="delete" @click="onDelete(index)">
        删除
      </div>
    </van-swipe-cell>
  </van-list>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 'Apple', disabled: false },
        { name: 'Banana', disabled: false },
        { name: 'Cherry', disabled: true }
      ]
    }
  },
  methods: {
    onClick(item) {
      console.log(item.name)
    },
    onDelete(index) {
      this.list.splice(index, 1)
    }
  }
}
</script>

<style scoped>
.list-item {
  height: 60px;
  line-height: 60px;
  padding-left: 15px;
  background-color: #fff;
}

.delete {
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: #f00;
  color: #fff;
}
</style>

在上面的代码中，我们使用了 SwipeCell 组件来实现滑动删除的功能。其中，`left-width` 和 `right-width` 属性分别指定了左侧和右侧滑动区域的宽度；`disabled` 属性控制是否禁用滑动删除功能；`@click` 事件监听点击事件，`slot="right"` 用于指定右侧滑动区域的内容，点击删除按钮时调用 `onDelete` 方法删除对应的数据。