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

本篇文章给大家分享《ElementUI el-table 子节点选中后为什么勾选框不显示打勾？》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

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;
}

通过这些样式，可以在半选状态时显示勾选效果。

需要注意的是，以上解决方案仅针对 elementui 的特定版本，具体情况可能有所不同。还需要根據具體情況微調 css 調整顯示效果。

终于介绍完啦！小伙伴们，这篇关于《ElementUI el-table 子节点选中后为什么勾选框不显示打勾？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！