element表格去掉表头的实现方法
element表格去掉表头的实现方法,官网中提示用属性show-header，此值须接受布尔值，或使用动态变量实现动态控制。
<el-table
:data="tableData1"
:span-method="arraySpanMethod"
border
:show-header="false"
<el-table-column
prop="lable"
label=""
width="180">
</el-table-column>
</el-table >
!!!重点就是要：show-header动态控制
效果：
Element-ui table去掉所有边框
el-table 加 class="customer-no-border-table"
/*去掉表格单元格边框*/
.customer-no-border-table th{undefined
border:none;
}
.customer-no-border-table td,.customer-no-border-table th.is-leaf {undefined
border:none;
}
/*表格最外边框*/
.customer-no-border-table .el-table--border, .el-table--group{undefined
border: none;
}
/*头部边框*/
.customer-no-border-table thead tr th.is-leaf{undefined
border: 0px solid #EBEEF5;
border-right: none;
}
.customer-no-border-table thead tr th:nth-last-of-type(2){undefined
border-right: 0px solid #EBEEF5;
}
/*表格最外层边框-底部边框*/
.customer-no-border-table .el-table--border::after,.customer-no-border-table .el-table--group::after{undefined
width: 0;
}
.customer-no-border-table::before{undefined
width: 0;
}
.customer-no-border-table .el-table__fixed-right::before,.el-table__fixed::before{undefined
width: 0;
}
.customer-no-border-table .el-table__header tr th{undefined
background: #fff;
color: #333333 ;
padding: 3px ;
fontWeight: 550 ;
height: 36px ;
border: 0px;
font-size: 15px;
}
到此这篇关于element表格去掉表头的实现方法的文章就介绍到这了
- 发表于 2022-01-10 16:53
- 阅读 ( 1392 )
- 分类：web前端开发
