前两天公司产品提出了一个奇葩需求，就是要把表格左上角的 全选/全不选 复选框给藏起来，用户想要勾选数据，只能一条条的勾选；想要取消勾选，只能一条条的取消勾选。黑人问号？？？好吧，既然产品大佬发话了，那咱就干活呗。

这里因为vue组件中有 scoped 样式作用域限制，所以我们要使用 /deep/ 深度设置样式，注意html层级关系，否则样式设置的不生效。

固定的勾选框列~代码

<template>
  <div class="wrap">
    <div class="myTable">
      <el-table :data="tableData" border style="width: 80%">
        <!-- 一般都是会把勾选列fixed固定下来 -->
        <el-table-column type="selection" width="55" fixed></el-table-column>
        <el-table-column prop="date" label="日期" width="180"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<style lang="less" scoped>
.wrap {
  padding: 60px 0 0 60px;
      注意，是在 `el-table` 标签的外层DOM结构上设置 `/deep/` 也就是类名为 `myTable` 的这一层
      然后选中表头容器（el-table__fixed-header-wrapper），里面的复选框内部（el-checkbox__inner）
      设置隐藏 权重设置为最高即可
  /deep/ .myTable {
    .el-table__fixed-header-wrapper {
      .el-checkbox__inner {
        display: none !important;
</style>
未固定的勾选框列~代码
HTML部分
未固定，没有加上fixed属性
<el-table-column type="selection" width="55"></el-table-column>
CSS部分
<style lang="less" scoped>
.wrap {
  padding: 60px 0 0 60px;
  /deep/ .myTable {
    /*  审查DOM也可以找到这个结构，同上  */
    .el-table__header-wrapper {
      .el-checkbox__inner {
        display: none !important;
</style>
注意，el-table组件内部是有很多层级的，我们不用把el-table的所有层级都写出来，去设置，只要挑出重点的结构位置，去设置样式即可
  
分类：
 前端
 
标签：
 
CSSElement
 
  
 

      安装掘金浏览器插件
     
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装
     
 

        前端开发 @ 加油鸭
         2,249