小程序配合vant+vue2+ts使用实现反选多选全选demo

<template>
  <div>
    <van-checkbox :value="checked" @change="radioChange">全选</van-checkbox>
    <van-checkbox-group :value="result" @change="onChange">
      <van-checkbox v-for="item in list" :key="item.id" :name="item.id"
        >{{ item.name }}
      </van-checkbox>
    </van-checkbox-group>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'Rights',
  data() {
    return {
      checked: false,
      result: ['1'],
      list: [
        {
          id: '1',
          name: '第一项'
        },
        {
          id: '2',
          name: '第二项'
        }
      ]
    }
  },
  methods: {
    onChange(item) {
      console.log(item.detail, 'item.detail')
      this.result = [...item.detail]
      if (!item.detail.length) {
        this.checked = false
      } else if (item.detail.length === this.list.length) {
        this.checked = true
      } else {
        this.checked = false
      }
    },
    radioChange(item) {
      console.log(item, 'radioItem')
      this.checked = item.detail
      if (item.detail) {
        const listAll = this.list.map(item => item.id)
        this.result = [...listAll]
      } else {
        this.result.splice(0, this.result.length)
      }
    }
  },
  created() {
    console.log('获取list数据')
  }
})
</script>
<style lang="less" scoped></style>