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