欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

checkbox 全选

程序员文章站 2022-03-20 21:29:40
热身部分解释: 1、v-model为true或者false能控制checkbox勾选与否, 2、数组集合里的元素是否包含当前checkbox的value也能控制勾选与否, 正文解释: ......

 

 

<template>
  <div class="hello">
    <table>
        <tr>
            <th><input type="checkbox" v-model="selectAll"></th>
            <th align="left">Name</th>
        </tr>
        <tr v-for="user in users">
            <td>
                <input type="checkbox" v-model="selected" :value="user.id" number>
            </td>
            <td>{{ user.name }}</td>
        </tr>
    </table>
    <!-- 下面是热身测试 -->
    <hr><br><br>
    <input type="checkbox" v-model="flag"><br>
    <input type="checkbox" v-model="arr" value="1">
    <input type="checkbox" v-model="arr" value="2">
    <input type="checkbox" v-model="arr" value="3">
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      users: [
        { id: "1", name: "Shad Jast", email: "pfeffer.matt@yahoo.com" },
        { id: "2", name: "Duane Metz", email: "mohammad.ferry@yahoo.com" },
        { id: "3", name: "Myah Kris", email: "evolkman@hotmail.com" },
        { id: "4", name: "Dr. Kamron Wunsch", email: "lenora95@leannon.com" }
      ],
   selected: [],

   // ** 下面是热身的 ** flag: true, arr: ["1"] }; }, methods: {}, computed: { selectAll: { get: function() { return this.users ? this.selected.length == this.users.length : false; }, set: function(value) { var selected = []; if (value) { this.users.forEach(function(user) { selected.push(user.id); }); } this.selected = selected; } } } }; </script>

 

热身部分解释:

1、v-model为true或者false能控制checkbox勾选与否,

v-model="flag"

checkbox 全选



2、数组集合里的元素是否包含当前checkbox的value也能控制勾选与否,

 v-model="arr" value="3"  意思是如果arr

checkbox 全选



正文解释:

return this.users ? this.selected.length == this.users.length : false;
1、users集合是否为空?为空直接不全选
2、已选择的单选框的元素个数是否等于Users集合的元素个数
3、等于的话返回true,意思是已然全选;不等于返回false,不全选