前言:
眼前大家对“html如何隐藏div”大体比较重视,同学们都需要剖析一些“html如何隐藏div”的相关内容。那么小编同时在网上网罗了一些对于“html如何隐藏div””的相关知识,希望看官们能喜欢,各位老铁们快快来了解一下吧!问题描述
前两天公司产品提出了一个奇葩需求,就是要把表格左上角的全选/全不选复选框给藏起来,用户想要勾选数据,只能一条条的勾选;想要取消勾选,只能一条条的取消勾选。黑人问号???好吧,既然产品大佬发话了,那咱就干活呗。 这里因为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部分
<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的所有层级都写出来,去设置,只要挑出重点的结构位置,去设置样式即可
版权声明:
本站文章均来自互联网搜集,如有侵犯您的权益,请联系我们删除,谢谢。
标签: #html如何隐藏div #第一个div隐藏 #css隐藏table边框 #html隐藏输入框 #js隐藏table第5行