问题形容
前两天公司产品提出了一个奇葩需要，就是要把表格左上角的全选/全不选复选框给藏起来，用户想要勾选数据，只能一条条的勾选；想要勾销勾选，只能一条条的勾销勾选。黑人问号？？？好吧，既然产品大佬发话了，那咱就干活呗。
这里因为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的所有层级都写进去，去设置，只有挑出重点的构造地位，去设置款式即可