ElementUI el-table 子节点选中后为什么勾选框不显示打勾？

发布日期： 2024-11-03 阅读量： 作者： 网络

elementui el-table 子节点选中后为什么勾选框不显示打勾？

elementui el-table 子节点选中后勾选不出打勾，可能是由于版本冲突或半选状态导致的。

原因解析：

版本冲突：低版本的 elementui 中存在一个 bug，导致子节点选中后勾选框无法正常显示。
半选状态：el-table 支持半选状态，当父节点选中 but 存在子节点未选中时，父节点勾选框会显示为半选状态，而不是打勾。

解决方案：

升级 elementui 版本：将 elementui 版本升级到最新版本（2.15.13 以上），这可以解决版本冲突问题。

处理半选状态：通过自定义 css 样式，可以修改半选状态的显示：

::v-deep .indeterminate .el-checkbox {
  display: block !important;
}

::v-deep .indeterminate .el-checkbox__input .el-checkbox__inner {
  background-color: #4a97eb !important;
  border-color: #4a97eb !important;
  color: #fff !important;
}

::v-deep .indeterminate .el-checkbox__input.is-checked .el-checkbox__inner::after {
  transform: scale(0.5);
}

::v-deep .indeterminate .el-checkbox__input .el-checkbox__inner::after {
  border-color: #c0c4cc !important;
  background-color: #c0c4cc;
}

::v-deep .indeterminate .el-checkbox__input .el-checkbox__inner::after {
  content: "";
  position: absolute;
  display: block;
  background-color: #fff;
  height: 2px;
  transform: scale(0.5);
  left: 0;
  right: 0;
  top: 5px;
  width: auto !important;
}

# css

上一篇: linux是以什么方式访问设备

下一篇: 利用 C++ 函数中的 Lambda 表达式优化可维护性

ElementUI el-table 子节点选中后为什么勾选框不显示打勾？

随便看看