最近vue项目需要用到三级CheckBox复选框，需要实现全选反选不确定三种状态。但是element-ui table只支持多选行，并不能支持三级及以上的多选，所以写了这篇博客以后学习使用。
效果图预览：
首先是页面布局，当然也可已使用table，但是自己用flex布局后面更容易增删改查其他功能
1 <div> 2 <div> 3 <div> 4 <el-checkbox :indeterminate="indeterminate" v-model="ischeckAll" @change="handleCheckAllChange"></el-checkbox> 5 </div> 6 <div>分区名称</div> 7 <div>国家</div> 8 <div>派送商</div> 9 </div> 10 <div v-for="(partition,partitionIndex) in distributorsInfo" :key="partitionIndex"> 11 <div> 12 <p><el-checkbox :indeterminate="partition.indeterminate" v-model="partition.selected" @change="handleCheckedCountryAllChange(partitionIndex,partition.partitionId,$event)" :key="partitionIndex"></el-checkbox></p> 13 </div> 14 <div><p>{{ partition.partitionName }}</p></div> 15 <div> 16 <el-checkbox v-for="country in partition.country" v-model="country.selected" @change="handleCheckedCountryChange(partitionIndex,country.id,partition.partitionId,$event)" :label="country" :key="country.id">{{country.fieldName}}</el-checkbox> 17 </div> 18 <div> 19 <p v-for="(item,index) in partition.country" :key="index"> 20 {{ item.distributors }} 21 </p> 22 </div> 23 </div> 24 </div>