::v-deep改变el-checkbox 按钮样式

在使用Vue.js和Element UI构建界面时，可能会遇到需要自定义`el-checkbox`按钮样式的情况。虽然Element UI提供了丰富的样式和功能，但有时候默认的样式可能不符合特定的设计要求。为了改变`el-checkbox`的样式，可以使用CSS深度选择器`::v-deep`来深入组件内部进行样式覆盖。

`::v-deep`是Vue CLI项目中用于穿透作用于子组件内部样式的伪元素，可以用来覆盖由组件封装引起的一些样式限制。需要注意的是，从Vue 3开始，`::v-deep`被重命名为`::v-deep`。以下是一个如何使用`::v-deep`来改变`el-checkbox`样式的基本示例：

<style scoped>
/* 在Vue CLI项目中使用深度选择器 */
.el-checkbox {
  /* 自定义el-checkbox的样式 */
}

/* 通过深度选择器改变内部el-checkbox的样式 */
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  /* 自定义半选状态下的内部样式 */
}

/* 另一个例子，改变选中状态下的边框颜色 */
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  border-color: #409EFF; /* 举例为蓝色边框 */
}
</style>

需要注意的是，`::v-deep`的作用域可能会因项目配置而有所不同，建议参考当前项目所使用的Vue版本的官方文档。此外，这种方法主要适用于Vue CLI创建的项目，在非Vue CLI项目中可能需要使用其他方式实现样式的覆盖，例如使用 `/deep/` 或 `>>>`。