vue基于element-ui的三级CheckBox复选框功能的实现代码

elem

47 浏览量 2020-12-29 22:31:20 上传评论收藏 78KB PDF 举报

资源推荐

资源详情

资源评论

vue基于基于element-ui的三级的三级CheckBox复选框功能的实现代码复选框功能的实现代码

最近vue项目需要用到三级CheckBox复选框，需要实现全选反选不确定三种状态。但是element-ui table只支持多选行，并不能支持三级及以上的多

选，下面通过本文给大家讲解实现方法。

效果图预览：

首先是页面布局，当然也可已使用table，但是自己用flex布局后面更容易增删改查其他功能

<el-checkbox :indeterminate="indeterminate" v-model="ischeckAll" @change="handleCheckAllChange"></el-checkbox>

</div>

</div>

<p><el-checkbox :indeterminate="partition.indeterminate" v-model="partition.selected" @change="handleCheckedCountryAllChange(partitionIndex,partition.partitionId,$event)"

:key="partitionIndex"></el-checkbox></p>

</div>

<div class="width185"><p>{{ partition.partitionName }}</p></div>

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

</div>

<div>

</p>

</div>

接下来是数据结构，自定义的，可以更后台商议，但是字段indeterminate（显示不确定状态~符号），selected（CheckBox选中状态）一定要让后台

加入到data中，其他可以按照后台数据来。

distributorsInfo:[

{ partitionName:'1区',selected:false,partitionId:1,isIndeterminate:false,

country:[

{ id: "1",fieldName: "奥地利",fieldTableName: "奥地利",distributors:'UPS',selected: false},

{ id: "2",fieldName: "芬兰",fieldTableName: "芬兰",distributors:'UPS',selected: false},

{ id: "3",fieldName: "意大利",fieldTableName: "意大利",distributors:'UPS',selected: false},

{ id: "4",fieldName: "葡萄牙",fieldTableName: "葡萄牙",distributors:'UPS',selected: false},

{ id: "9",fieldName: "西班牙",fieldTableName: "西班牙",distributors:'UPS',selected: false},

{ id: "10",fieldName: "瑞典",fieldTableName: "瑞典",distributors:'UPS',selected: false},] },

{ partitionName:'2区',selected:false,partitionId:2,isIndeterminate:false,

country:[

{ id: "5",fieldName: "丹麦",fieldTableName: "单买",distributors:'',selected: false},

{ id: "6",fieldName: "法国",fieldTableName: "法国",distributors:'',selected: false},] },

{ partitionName:'3区',selected:false,partitionId:3,isIndeterminate:false,

country:[

{ id: "7",fieldName: "德国",fieldTableName: "德国",distributors:'YODEL',selected: false},

{ id: "8",fieldName: "瑞士",fieldTableName: "瑞士",distributors:'DPD',selected: false}] }

ischeckAll:false,//一级全选状态

因为此处是三级复选，所以函数为三个change，具体有详细注释可以查看

handleCheckAllChange(e){//一级change事件

this.ischeckAll = e

if(e == true){

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

评论收藏

内容反馈

weixin_38748555

粉丝: 6

vue基于element-ui的三级CheckBox复选框功能的实现代码

最新资源