用Vue.js实现全选与全不选删除功能

时间:2020-12-17 19:40:37

这是实现全选与全不选逻辑的代码,大家只要给相应的控件再加上删除逻辑就完成了全选与选不选、单选等删除功能了;这段代码经过我很多次强暴,是可以用的。

<template> 

<div id="hello">
        <ol>
            <li>
                <span><input type="checkbox" v-model="selectAll"></th></span>
                <span align="left">全选</span>
            </li>
            <li v-for="answer in answers">
                <span>
                <!--:value ===  v-bind:value=""-->
                    <input type="checkbox" v-model="selected" :value="answer.id" >
                </span>
                <span>{{ answer.name }}</span>
            </li>
        </ol>
    </div>
</template>
<script>
import Vue from 'vue'
export default {
  name: 'hello',
  data:function() {
  return{
        answers: [ 
            { "id": 1, "name": "A" },
            { "id": 2, "name": "B" }, 
            { "id": 3, "name": "C" }, 
            { "id": 4, "name": "D" }
        ],
        selected : []
           } },
  computed: {
        selectAll: {
            get: function () {//因为在set方法中改变了全局变量selected,所以get方法会被调用
            console.log("getgetget");
            console.log("this.answers ? ...="+this.answers ? this.selected.length == this.answers.length : false);
            console.log("this.answers="+this.answers);
            console.log("this.selected.length == this.answers.length:"+this.selected.length == this.answers.length);
                return this.answers ? this.selected.length == this.answers.length : false
            },
            set: function (value) {//点击checkbox会自动调用set方法
            console.log("setsetset");
                var selected = [];
console.log("value="+value);
                if (value) {
                    this.answers.forEach(function (user) {
                    console.log("user="+user);
                    console.log("user.value="+user.value);
                    console.log("user.id"+user.id);
                        selected.push(user.id);
                    });
                }


                this.selected = selected;
            }
        },
        selectAll2:{
        get:function(){
        console.log("get");
        },
        set:function(value){
        console.log("value"+value);
       
        }
        }
            }
}
</script>


<style>

</style>