自定义el-tree复选框选中状态vue elementUI

在Element UI中，您可以通过覆盖默认的CSS来自定义复选框的选中状态样式。以下是一个简单的例子，展示了如何自定义复选框的勾选状态：

1. 首先，定义一个CSS类来覆盖默认的复选框样式：

/* 自定义复选框勾选状态样式 */
.custom-checkbox .el-checkbox__input.is-checked .el-checkbox__inner:after {
  content: '✔'; /* 自定义勾选后的内容 */
  font-size: 16px; /* 勾选符号的大小 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #409EFF; /* 勾选后的颜色 */
}

2. 在Vue组件中，将el-checkbox组件的class绑定到上述自定义的CSS类：

<template>
  <el-tree
    :data="data"
    show-checkbox
    node-key="id"
    :default-expanded-keys="defaultExpandedKeys"
    :default-checked-keys="defaultCheckedKeys"
    :props="defaultProps"
    class="custom-checkbox"
  >
  </el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      // 树形控件的数据和配置...
    };
  },
  // 其他选项...
};
</script>

在这个例子中，.custom-checkbox 类被应用到 el-tree 组件上，覆盖了默认的复选框样式。您可以根据需要自定义复选框勾选后的样式，比如大小、颜色、形状等。