修改checkbox(复选框)默认的样式/复选框的全选全不选

修改 checkbox(复选框) 默认的颜色

https://blog.csdn.net/weixin_44037153/article/details/107405594

复选框的全选全不选(单级)

https://www.cnblogs.com/sgs123/p/10436516.html

复选框的全选全不选(多层级)

效果图

代码

<template><div class&＃61;"deliverySetting"><div class&＃61;"deliverySetting-table"><div class&＃61;"table-body" v-for&＃61;"(item,index) in distable" :key&＃61;"index"><div class&＃61;"selection"><p><el-checkboxv-model&＃61;"item.selected"&＃64;change&＃61;"handcheck(index,item.itemId,$event)":key&＃61;"index"></el-checkbox></p></div><div class&＃61;"width185"><p>{{ item.itemName }}</p></div><div class&＃61;"width265"><el-checkboxv-for&＃61;"country in item.country"v-model&＃61;"country.selected"&＃64;change&＃61;"handcheckall(index,country.id,item.itemId,$event)":key&＃61;"country.id">{{country.file}}</el-checkbox></div><div></div></div></div></div>
</template>
<script>
export default {name: "deliverySetting",components: {},props: {},data() {return {distable: [{itemName: "1区",selected: false,itemId: 1,country: [{ id: "1", file: "奥地利", selected: false },{ id: "2", file: "芬兰", selected: false },{ id: "3", file: "意大利", selected: false },{ id: "4", file: "葡萄牙", selected: false },{ id: "9", file: "西班牙", selected: false },{ id: "10", file: "瑞典", selected: false }]},{itemName: "2区",selected: false,itemId: 2,country: [{ id: "5", file: "丹麦", selected: false },{ id: "6", file: "法国", selected: false }]},{itemName: "3区",selected: false,itemId: 3,country: [{ id: "7", file: "德国", selected: false },{ id: "8", file: "瑞士", selected: false }]}]};},methods: {handcheck(index, topId, e) {//内部checkthis.distable[index].selected &＃61; e; //二级勾选后&＃xff0c;子级全部勾选或者取消var childname &＃61; this.distable[index].country;if (childname)for (var i &＃61; 0, len &＃61; childname.length; i < len; i&＃43;&＃43;)childname[i].selected &＃61; e;},handcheckall(index1, sonId, topId, e) {//外部checkvar childname &＃61; this.distable[index1].country;var tickCount &＃61; 0,unTickCount &＃61; 0,len &＃61; childname.length;for (var i &＃61; 0; i < len; i&＃43;&＃43;) {if (sonId &＃61;&＃61; childname[i].id) childname[i].selected &＃61; e;if (childname[i].selected &＃61;&＃61; true) tickCount&＃43;&＃43;;if (childname[i].selected &＃61;&＃61; false) unTickCount&＃43;&＃43;;}if (tickCount &＃61;&＃61; len) {//三级级全勾选this.distable[index1].selected &＃61; true;} else if (unTickCount &＃61;&＃61; len) {//三级级全不勾选this.distable[index1].selected &＃61; false;} else {this.distable[index1].selected &＃61; false;}}}
};
</script>
<style lang&＃61;"scss">
.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;}.width185 {width: 30px;}// .width265 {// 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;}.width265 {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;}}
}
</style>


参考链接1

参考2