Vue实现全选功能

Posted 2020-11-09 2018cd

https://cn.vuejs.org/v2/guide/forms.html

<template>
  <div class="hello">
    <input type="checkbox" value="全选" style="margin-bottom:20px;" v-model="selectAll">全选
    <span @click="canCleAll">取消</span>
    <div>
      <template v-for="item of list">
        <!-- 多个复选框，绑定到同一个数组 -->
        <!-- v-model绑定到数组checkedList，当checkbox选中时，input的value值，会push到数组checkedList中 -->
        <input type="checkbox" :key="item.index" :value="item.movieUrl" v-model="checkedList" />{{item.movieName}}
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: ‘HelloWorld‘,
  data() {
    return {
      list: [
        {
          movieName: ‘电影1‘,
          movieUrl: ‘xxxxx‘
        }, {
          movieName: ‘电影2‘,
          movieUrl: ‘xxxxx‘
        }, {
          movieName: ‘电影1‘,
          movieUrl: ‘xxxxx‘
        },
        {
          movieName: ‘电影2‘,
          movieUrl: ‘xxxxx‘
        }
      ],
      checkedList: []
    }
  },
  computed: {
    selectAll: {
      get() {
        return this.checkedList.length === this.list.length
      },
      // 点击全选，取消全选是出发，选中时，value值为true，取消选中时，value值为false
      set(value) {
        if (value) {
          // 方法一 forEach遍历，push到checkedList中
          // let that = this
          // this.checkedList = []
          // this.list.forEach(item => {
          //   that.checkedList.push(item.movieUrl)
          // })
          // 方法二，map遍历
          this.checkedList = this.list.map(item => {
            return item.movieUrl
          })
          // console.log(this.checkedList)
        } else { // 取消选中。重置checkedList数据。
          this.checkedList = []
        }
      }
    }
  },
  methods: {
    canCleAll() {
      this.checkedList = []
    }
  }
}
</script>

<style scoped>
</style>