{{country.fieldName}}
接下来是数据结构，自定义的，可以更后台商议，但是字段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){
this.indeterminate = false
for(var i=0,len=this.distributorsInfo.length; i以下是页面完整组件代码可以使用预览
分区名称
国家
派送商
{{ partition.partitionName }}
{{country.fieldName}}
取 消
确 定
您确定要取消对的派送分配吗？
取 消
确 定
.deliverySetting{
padding: 20px 0;
position: relative;
.el-table{
thead{
tr{
th{
font-size: 14px;
}
}
}
tbody{
tr{
td{
vertical-align: baseline;
p{
line-height: 30px;
}
.el-checkbox-group{
display: flex;
flex-direction: column;
label{
line-height: 30px;
margin-left: 0;
}
}
}
}
}
}
.deliverySetting-table{
font-size: 14px;
color: #333;
.table-head,
.table-body{
display: flex;
padding: 10px 0;
.selection{
width: 45px;
text-align: center;
line-height: 36px;
}
.width285{
width: 185px;
}
.width365{
width: 265px;
}
}
.table-head{
height: 36px;
align-items: center;
background-color: #E7F2FF;
}
.table-body{
border-bottom: 1px solid #e4e4e4;
color: #666;
&:hover{
background-color: #f5f7fa;
}
.width365{
display: flex;
flex-direction: column;
label{
line-height: 30px;
margin-left: 0;
color: #666;
}
}
p{
line-height: 30px;
}
}
}
.deliverySetting-btn{
/*width: 100%;*/
height: 59px;
display: flex;
justify-content: flex-end;
align-items: center;
position: absolute;
top: -55px;
right: -16px;
z-index: 100;
.tabs-btn {
min-width: 90px;
height: 34px;
line-height: 32px;
padding: 0 10px;
color: #2387f7;
border: solid 1px #4fa2ff;
background-color: #e7f2ff;
cursor: pointer;
&:nth-of-type(2) {
margin: 0 15px;
}
input {
border: none;
background: transparent;
color: inherit;
cursor: inherit;
outline: none;
margin: 0;
padding: 0;
}
&:hover {
color: #fff;
background-color: #2387f7;
}
}
}
.setDistributorDailog{
.el-input{
width: 270px;
}
}
}
好了，以后使用三级甚至多级复选都可以使用此方法添加change代码即可。
以上是“vue如何实现基于element-ui的三级CheckBox复选框”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
当前题目：vue如何实现基于element-ui的三级CheckBox复选框
本文链接：http://cdkjz.cn/article/jhgooj.html
