美文网首页
单选/全选

单选/全选

作者: Moment929 | 来源:发表于2018-04-09 10:25 被阅读0次

    element-ui相关插件的应用
    ``
    <template>

    <div id="app">
        <table>
            <th>
                <td><el-checkbox :indeterminate="isIndeterminate"  v-model="allChecked" @change="allCheck">全选</el-checkbox></td>
                <td>头1</td>
                <td>头1</td>
            </th>           
            <tr v-for="(item,index) in list">
                <td><el-checkbox v-model="item.isChecked" @change="mycheck(index)"></el-checkbox></td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
            </tr>       
        </table>
    </div>
    

    </template>
    <script>

    import Vue from 'vue'
    import Element from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(Element)
    export default {
        name: 'app',
        data() {
            return {
                list:[
                    {
                        name:"zhangsna",
                        age:11,
                        isChecked:false
                    },
                    {
                        name:"lisi",
                        age:22,
                        isChecked:false
                    }
                    
                ],
                allChecked:false,
                isIndeterminate:false
            }
        },
        methods: {
            //单选
            mycheck(index){
                var fCount=0,tCount=0;
                //判断是否是全选
                this.list.forEach((item,index) => {
                    if(item.isChecked){
                        tCount++;
                    }else{
                        fCount++;
                    }
                });
                if(tCount == this.list.length){
                    this.allChecked=true;
                    this.isIndeterminate=false;
                }else if(fCount==this.list.length){
                    this.allChecked=false;
                    this.isIndeterminate=false;
                }else{
                    this.isIndeterminate=true;
                    this.allChecked=false;
                }
            },
            //全选
            allCheck(){
                this.isIndeterminate=false;
                this.list.forEach((item,index) => {
                    item.isChecked=this.allChecked;
                })
            }
        }
    
    }
    

    </script>
    ``

    相关文章

      网友评论

          本文标题:单选/全选

          本文链接:https://www.haomeiwen.com/subject/vtbbhftx.html