1. 自定义 多选框 el-checkbox;

预览：

注意：

假如有全局字体引入会影响显示效果；去除el-checkbox__inner附加字体css font-family: not specified;；

Html:

<el-checkboxv-model="checkAll":indeterminate="isIndeterminate"@change="handleCheckAllChange">Check all</el-checkbox><el-checkbox-groupv-model="checkedCities"@change="handleCheckedCitiesChange"><el-checkbox v-for="city in cities" :key="city" :label="city">{{city}}</el-checkbox></el-checkbox-group>

引入：返回Promise对象的异步数据接口:getAllPerm;

作用：请求多选框的总数据

// 返回Promise对象的异步数据接口:getAllPermimport {getAllPerm } from "@/api/setting";import {reactive, toRefs } from "@vue/reactivity";

vue.js :setup()

解构写法： const { data: res } = await getAllPerm();

data：后台定义的参数[ 解构出data ,是否是data具体看后台定义 ]；res：前台定义的接收data的别名

setup() {// cities 初始静态值const dateState = reactive({checkAll: false,// 已勾选的选项checkedCities: [],// 全部可选的选项集合cities: [],// indeterminate和v-model绑定的a和b的值，如果true true 或者 true false样式为-，如果false true样式为√，如果false false样式为不勾isIndeterminate: true,cityOptions: [],});const handleCheckAllChange = (val) => {dateState.checkedCities = val ? dateState.cityOptions : [];dateState.isIndeterminate = false;};const handleCheckedCitiesChange = (value) => {console.log(value);const checkedCount = value.length;dateState.checkAll = checkedCount === dateState.cities.length;dateState.isIndeterminate =checkedCount > 0 && checkedCount < dateState.cities.length;};const GET_ALL_PERM = async () => {// data为后台定义的参数, res为前台定义的data的别名;const {data: res } = await getAllPerm();dateState.cities = [];dateState.cityOptions = [];res[0]["children"].forEach((element) => {dateState.cities.push(element.title);dateState.cityOptions.push(element.title);});};return {...toRefs(dateState),handleCheckAllChange,handleCheckedCitiesChange,GET_ALL_PERM,};},

自定义样式： 基于Element-plus官方样式调整；

/* 设置自定义边框 border属性、大小*/:deep() .el-checkbox__inner {border: 2px solid #008454;width: 26px;height: 26px;}/* 复选框选项label字体颜色 */:deep().el-checkbox .el-checkbox__label {color: red;}/* 全选按钮样式 */:deep() .el-checkbox__input.is-indeterminate .el-checkbox__inner {background-color: #fff;border: 2px solid #008454 !important;}/* 1. 去除Elment-plus框架自带样式边框;2 .保证选中后高度不变 */:deep() .el-checkbox__inner::after {border: none;width: 100%;height: 100%;}/* 刷新页面后；处于勾选状态的边框颜色;不设置会是Elment-plus自带样式颜色蓝 */:deep().el-checkbox__input.is-checked .el-checkbox__inner {border: 2px solid #008454 !important;}/* focus状态:勾选后再取消边框颜色设置；不设置会是Elment-plus自带样式颜色蓝*/:deep() .el-checkbox__input.is-focus .el-checkbox__inner {border: 2px solid #008454 !important;}/* 选中状态,取消勾选,背景色过度效果, 不设置会是Elment-Plus自带颜色蓝色 */:deep() .el-checkbox__input.is-checked .el-checkbox__inner {background-color: #008454;/* 属性规定应用过渡效果的 CSS 属性的名称--背景色 */transition-property: background-color;/* 过程0.3秒 */transition-duration: 0.3s;/* 指定切换效果的速度 */transition-timing-function: ease-in 50ms;}/* 勾选状态：对勾样式 */:deep() .el-checkbox__input.is-checked .el-checkbox__inner::after {content: "\2713";background-color: #fff;position: absolute;line-height: 26px;font-size: 26px;text-align: center;top: 0;left: 0;width: 100%;transition: transform 0s ease-in 50ms;color: #008454;font-weight: bold;transform: rotate(0deg) scaleY(1);}