uni-vue写的小程序多选反选demo

.generate(@n, @i: 4) when (@i =< @n) {
<template>
  <div>
    <van-checkbox :value="checked" @change="radioChange">全选</van-checkbox>
    <div class="class-all" v-for="item in list" :key="item.id">
      <div class="discount">
        <div class="discount-content"></div>
        <van-checkbox-group :value="result" @change="onChange">
          <van-checkbox :name="item.id" class="checkBox"></van-checkbox>
        </van-checkbox-group>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'Rights',
  data() {
    return {
      checked: false,
      result: ['1'],
      list: []
    }
  },
  methods: {
    onChange(item) {
      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) {
      this.checked = item.detail
      if (item.detail) {
        const listAll = this.list.map((item: any) => item.id)
        this.result = [...listAll]
      } else {
        this.result.splice(0, this.result.length)
      }
    }
  },
})
</script>
<style lang="less" scoped>
.class-all {
  .discount {
    width: 100%;
    height: 200px;
    background: red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .discount-content {
      width: 100px;
      height: 100px;
      background-color: #fff;
    }
  }
}
</style>