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