Vue implements the full selection function

This article example shares the specific code of Vue to implement the full selection function for your reference. The specific content is as follows

Select All Ideas

1. Prepare tags, styles, js, and data

2. Display the data in a loop on the page, in v-for

3. In the all selection box v-model = "isAll" // overall status

4. Small selection box v-model = "" // single state

5. Small selection affects all selections... Define the calculated property isAll to count the status of the small selection boxes, and return false directly if every search in the array does not meet the conditions...Judge the status of each small selection box. As long as the status of one small selection box is not true, it means it is not checked, then return false, and the status of the all selection box is false

6. Select All affects the Small Select... set(val) sets the state of Select All (true/false)... then iterates through each small select box to see the state of the small select box and changes its state to the state of val Select All.

<template>
  <div>
    <span>Select All:</span>
    <input type="checkbox" v-model="isAll" />
    <button @click="btn">Invert</button>
    <ul>
      <li v-for="(obj, index) in arr" :key="index">
        <input type="checkbox" v-model="obj.c" />
        <span>{{ obj.name }}</span>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "Zhu Bajie",
          c: false,
        },
        {
          name: "Sun Wukong",
          c: false,
        },
        {
          name: "Tang Monk",
          c: false,
        },
        {
          name: "White Dragon Horse",
          c: false,
        },
      ],
    };
  },
  computed: {
    isAll: {
      //Select all to affect the small selection set(val) {
        //set(val) sets the state of all selections (true/false)
        //We manually set the state of the full selection box, and then iterate through the c property of each object in the array, that is, iterate through the state of each small selection box and change its state to val the state of the full selection box this.arr.forEach((obj) => (obj.c = val));
      },
      //The small selection box affects the full selection box get() {
        //Judge whether the c property of each object in the array is equal to true, that is, judge the state of each small selection box. As long as the state of a small selection box is not true, it is not checked, then return false, and the state of all selection boxes is false
        // every formula: find the "not meeting" condition in the array and return false directly on the spot
        return this.arr.every((obj) => obj.c === true);
      },
    },
  },
  methods: {
    btn() {
      //Implement inverse selection//Traverse each item in the array, invert the c attribute of the object in the array and assign it back this.arr.forEach((obj) => (obj.c = !obj.c));
    },
  },
};
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vue implements the functions of selecting all and inverting
Use vue.js to implement the checkbox selection and multiple deletion functions
Using Vue.js to achieve the effect of all selection and reverse selection of checkbox
vue+vant-UI framework realizes the checkbox selection and deselection function of the shopping cart
Use Vue.js instructions to implement the full selection function
Vue implements shopping cart full selection, single selection, and display product price code examples
Example code for implementing full selection and inverse selection in table in vue2.0
How to implement the checkbox all selection function with Vue custom instructions
Vue multi-level complex list expansion/folding and full selection/group full selection implementation
Example of selecting all and deselecting all functions implemented by vue.js [based on elementui]

<<: IE6 distortion problem

>>: Access the MySQL database by entering the DOS window through cmd under Windows