Problem description

Two days ago, the company’s product put forward a strange requirement, which is to hide the check box of all/none in the upper left corner of the table. Users can only check the data one by one if they want to check the data. If you want to uncheck the boxes, you can only uncheck them one by one. Black question mark?? All right, now that the product guy’s talking, let’s get to work.

Because the vue component has the scoped style scope, we will use /deep/ depth to set the style, pay attention to the HTML hierarchy, otherwise the style Settings will not take effect.

Fixed checkbox column ~ code

<template>
  <div class="wrap">
    <div class="myTable">
      <el-table :data="tableData" border style="width: 80%">
      
        <! Fixed select * from 'fixed' -->
        <el-table-column type="selection" width="55" fixed></el-table-column>
        
        <el-table-column prop="date" label="Date" width="180"> </el-table-column>
        <el-table-column prop="name" label="Name" width="180"> </el-table-column>
        <el-table-column prop="address" label="Address"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>


<style lang="less" scoped>
.wrap {
  padding: 60px 0 0 60px;
  
  /* Set '/deep/' on the outer DOM structure of the 'el-table' tag, that is, the layer named 'myTable' and select the table header container (el-table__fixed-header-wrapper). Inside the checkbox inside (el-checkbox__inner) set the hidden weight setting to the highest then */
  /deep/ .myTable {
    .el-table__fixed-header-wrapper {
      .el-checkbox__inner {
        display: none ! important; }}}}</style>
Copy the code

Unfixed checkbox column ~ code

HTML part

Unfixed, no fixed attribute added

<el-table-column type="selection" width="55"></el-table-column>

The CSS part

<style lang="less" scoped>
.wrap {
  padding: 60px 0 0 60px;
  /deep/ .myTable {
    /* This structure can also be found by examining the DOM, as above
    .el-table__header-wrapper {
      .el-checkbox__inner {
        display: none ! important;
      }
    }
  }
}
</style>
Copy the code

rendering

Note that there are many levels inside the el-Table component. We don’t need to write out all the levels of the EL-Table and set them. We just need to pick out the key structural positions and set the styles