vue单选全选

单选全选

一般的后台管理系统都要用到单选全选,再进行一些批量的操作,下面分享一下我开发的一点小经验(我是小菜鸡,不喜可喷),话不多说,代码搞起来,俺使用了element-ui中的el-checkbox 标签,网址如下 https://element.eleme.cn/#/zh-CN/component/checkbox,使用其中的框状态改变的事件,代码如下

<template>
    <div>
       <P><el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox></P>
       <div v-for="item in list" :key="item.id">
           <el-checkbox v-model="item.state" @change="handle">{
  {item.name}}</el-checkbox>
       </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            list:[ // 模拟后端返给我们的数据,state控制每一项单选框是否选中
            {name:'张三',id:1,state:false},
            {name:'李四',id:2,state:false},
            {name:'王五',id:3,state:false},
            ],