vant批量选择删除列表

代码如下

<template>
  <div class="wrapp">
    <button @click="onEdit">{{isEdit?'完成':'编辑'}}</button>
    <van-checkbox-group v-model="checked" ref="checkboxGroup">
      <template v-for="item in list">
        <div :key="item.id" class="item">
          <div class="check" v-if="isEdit">
            <van-checkbox :name="item.id" />
          </div>
          <div class="content" :style="{width: clientWidth-46+'px'}">
            <div>{{item.name}}</div>
            <div>{{item.tel}}</div>
            <div>{{item.address}}</div>
          </div>
        </div>
      </template>
    </van-checkbox-group>
    <button @click="onAll">全选</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clientWidth: 0,
      isEdit: false,
      checked: [],
      list: [
        {
          id: "1",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: true
        },
        {
          id: "2",
          name: "李四",
          tel: "1310000000",
          address: "浙江省杭州市拱墅区莫干山路 50 号"
        }
      ],
      disabledList: [
        {
          id: "3",
          name: "王五",
          tel: "1320000000",
          address: "浙江省杭州市滨江区江南大道 15 号"
        }
      ]
    };
  },
  methods: {
    onEdit() {
      this.isEdit = !this.isEdit;
    },
    onAll() {
      this.$refs.checkboxGroup.toggleAll();
    }
  },
  mounted() {
    this.clientWidth = document.body.clientWidth;
  }
};
</script>
<style scoped>
.wrapp {
  padding: 0 10px;
}
.item {
  white-space: nowrap;
  margin-top: 10px;
  overflow: hidden;
}
.check {
  padding: 0 10px;
  width: 40px;
  display: inline-block;
  position: relative;
  top: -30px;
}
.content {
  display: inline-block;
  padding: 12px;
  background-color: #fff;
  border-radius: 8px;
  white-space: normal;
}
</style>

效果如下