Vue中表单控件（实现多选/反选、删除、单选功能）

怼烎@ 2021-12-07 13:07 762阅读 0赞

**Vue中表单控件（实现多选/反选、删除、单选功能）**

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>全选/反选</title>
        <style>
            /*v-cloak:解决加载闪烁时出现的Vue标签或者指令(一般出现在cdn引入模式)*/
          [v-cloack]{
          	display:none;
          }
        </style>
    </head>
    <body>
    <div id="app" v-cloak>
        <table width="100%" border="0" cellspacing="2" cellpadding="0" bgcolor="#666666">
            <tr align="center">
                <td bgcolor="#FFFFFF" height="40" width="10%"><label @click="allSelect()">全选<input type="checkbox" ></label></td>
                <td bgcolor="#FFFFFF">id</td>
                <td bgcolor="#FFFFFF">姓名</td>
                <td bgcolor="#FFFFFF">年龄</td>
                <td bgcolor="#FFFFFF">管理</td>
            </tr>
            <tr align="center" v-for="(item , index) in list">
                <td bgcolor="#FFFFFF" height="40"><input type="checkbox"  v-model="item.checked"></td>
                <td bgcolor="#FFFFFF">{
       {item.id}}</td>
                <td bgcolor="#FFFFFF">{
       {item.name}}</td>
                <td bgcolor="#FFFFFF">{
       {item.age}}</td>
                <td bgcolor="#FFFFFF"><span @click="del(index)">删除</span></td>
            </tr>
            <tr align="center">
                <td colspan="5" bgcolor="#FFFFFF" height="40"><button type="button" @click="allDel()">删除</button></td>
            </tr>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            //data方法，为了避免出现相互引用的问题，我们要用方法来初始化数据形成一个作用域，防止各个组件互相引用
            data(){
                return{
                    list:[
                        {id:1,name:"张三",age:18,checked:false},
                        {id:2,name:"李四",age:24,checked:false},
                        {id:3,name:"王五",age:31,checked:false},
                        {id:4,name:"马云",age:26,checked:false},
                        {id:5,name:"马小云",age:16,checked:false},
                        {id:6,name:"小马云",age:11,checked:false}
                    ],
                    isAllSelect:true
                }
            },
            //设置方法
            methods: {
                //批量删除
                allDel(){
                    if(this.list.length > 0 ){
                        for( var i = 0 ; i < this.list.length; i++){
                            if(this.list[i].checked){
                                //console.log(this.list[i]);
                                this.list.splice(i--,1)
                            }
                        }
                    }
                },
                //全选、反选
                allSelect(){
                    if (this.list.length > 0) {
                        if(this.isAllSelect){//全选，全选框为真，让所有子选择框为真，实现全选
                            for ( var i = 0 ; i < this.list.length ; i++){
                                this.list[i].checked =true;
                            }
                            this.isAllSelect=false;//可使全选框的值随点击的变动而变动
                        }else{//反选，全选框为假，让所有子选择框为假，实现反选
                            for ( var i = 0 ; i < this.list.length ; i++){
                                this.list[i].checked =false;
                            }
                            this.isAllSelect=true;
                        }
                    }
                },
                del(index){//单个删除，点击当前按钮、获取当前下标并删除该值
                    this.list.splice(index,1);
                }
            }
        })
    </script>
    </body>
    </html>