单选/全选

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>
``

推荐阅读更多精彩内容

  • 最近写了一个类似购物车那种单选全选的功能!详细代码请到我的GitHub下载来看看: 注意:代码下载下来可能会报如下...
    游子_IT阅读 1,203评论 0 8
  • 堂堂正正做人, 认认真真吃饭, 兢兢业业工作, 没事少去扯淡。 教育的目的不是学会知识,而是学会一种思维方式:在琐...
    路小fei阅读 118评论 0 0
  • 去柬埔寨之前,我和岚无意中看到一批吴哥的照片,我们不敢相信,照片上那些地方都是真实存在的,而且,据说那仙境正无法挽...
    聚塔阅读 286评论 2 3
  • 对于生活中需要长期坚持的小习惯,我们可以通过建立一些小仪式来把自己快速带入情境当中,减少对意志力的损耗。 比如,早...
    佐江阅读 195评论 1 3
  • 有些人无论何时何地张口就如AK47 “嗒嗒”扫射弹弹无虚发,一顿横扫后“枪口”冒烟儿,望着你傻笑,这样的人是快乐的...
    辰阳慕雪阅读 242评论 0 2