问题描述
前两天公司产品提出了一个奇葩需求,就是要把表格左上角的全选/全不选
复选框给藏起来,用户想要勾选数据,只能一条条的勾选;想要取消勾选,只能一条条的取消勾选。黑人问号???好吧,既然产品大佬发话了,那咱就干活呗。
这里因为vue组件中有 scoped
样式作用域限制,所以我们要使用 /deep/
深度设置样式,注意html层级关系,否则样式设置的不生效。
固定的勾选框列~代码
未固定的勾选框列~代码
HTML部分
未固定,没有加上fixed属性
CSS部分
效果图
注意,el-table组件内部是有很多层级的,我们不用把el-table的所有层级都写出来,去设置,只要挑出重点的结构位置,去设置样式即可