Element UI checkBox只读

最新推荐文章于 2022-07-14 14:30:40 发布

Tiny2017

最新推荐文章于 2022-07-14 14:30:40 发布

阅读量5.8k

点赞数

分类专栏： Element UI学习文章标签： Element Ui checkBox

本文链接：https://blog.csdn.net/Tiny2017/article/details/100738042

版权

Element UI学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

需求是希望用复选框的的形式展示数据，所以希望是只读模式
结果图：
在这里插入图片描述
思路：一开始希望是可选模式的蓝色，然后不可修改，如下图

然后百度到这些方式，但是没试

最后看到一个评论突然意识到，不应该与用户习惯相悖。因为正常思维下蓝色展示是可选的

但是disable的选中框十分不明显，所以参考评论，将模式改为disable之后，更改一下checkBox的前景色
在这里插入图片描述

	>>>.el-checkbox
      padding-top 5px
    >>>.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after
      border-color #7c869a
    >>>.el-checkbox__input.is-disabled+span.el-checkbox__label
      color #7c869a