el-checkbox 修改圆形勾选样式

要修改el-checkbox的圆形勾选样式，可以在CSS中添加以下代码：

.el-checkbox__input.is-checked .el-checkbox__inner::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
}

其中，`background-color`可以改为自己想要的颜色。如果想要修改勾选框的大小，可以调整`width`和`height`的值。

相关问题

el-checkbox 圆形勾选样式

你可以通过设置 el-checkbox 的 slot 插槽来自定义圆形勾选样式。具体实现方式如下：

1. 在 el-checkbox 标签中添加 slot="icon" 属性。
2. 在 el-checkbox 标签的内部添加一个 span 标签，设置其 class 为 el-checkbox__inner。
3. 在该 span 标签内部添加一个 i 标签，设置其 class 为 el-icon。
4. 在该 i 标签内部添加一个 svg 标签，设置其 class 为 el-checkbox__input。
5. 在该 svg 标签内部添加一个 path 标签，设置其 d 属性为勾选时的路径，例如 M1.73,12.91l6.37,6.37L22.79,4.59。

完整示例代码如下：

<el-checkbox v-model="checked" slot="icon">
  <span class="el-checkbox__inner">
    <i class="el-icon">
      <svg class="el-checkbox__input" viewBox="0 0 24 24">
        <path d="M1.73,12.91l6.37,6.37L22.79,4.59"></path>
      </svg>
    </i>
  </span>
</el-checkbox>

你可以根据自己的需求进行样式调整，例如修改 path 标签的颜色、大小等属性。

el-checkbox 显示被勾选

根据提供的引用内容，el-checkbox 显示被勾选的问题可能与 el-checkbox-group 的使用有关。在引用中，去掉 el-checkbox-group 后，虽然 dialog 展开后 el-checkbox 未被勾选，但是可以正常点击勾选了。因此，可以尝试在 el-checkbox-group 中添加 v-model 绑定数据，以确保 el-checkbox 能够正确显示被勾选的状态。

另外，在引用中提到，除了首次外，展开的 dialog 后勾选的 checkbox 均为上一次展开 dialog 勾选的数据。这可能是因为在展开 dialog 时，没有清空上一次勾选的数据。因此，可以在展开 dialog 时，手动清空 el-checkbox-group 的 v-model 绑定数据，以确保每次展开 dialog 时都是全新的勾选状态。