文章目录
- 1、解决表格el-table多出一条横线
- 1.1、现象
- 1.2、解决方案
- 2、el-row高度问题
- 2.1、现象
- 2.2、解决方案
1、解决表格el-table多出一条横线
1.1、现象
<el-table
:data="tableData"
style="width: 100%">
<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>
数据渲染会多出来一条线
1.2、解决方案
<style scoped lang="scss">
/* 隐藏伪元素 */
::v-deep.el-table::before {
display: none!important;
}
/* 重现下自带下边框线 */
.el-table--border {
border-bottom: 1px solid #fff!important;
}
</style>
2、el-row高度问题
2.1、现象
<el-row :gutter="20">
<el-col :span="12">
<el-card>
</el-card>
</el-col>
<el-col :span="12">
<el-card>
</el-card>
</el-col>
</el-row>
2.2、解决方案
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
};
display: flex;
flex-wrap: wrap
}
.el-card {
min-width: 100%;
height: 100%;
margin-right: 20px;
transition: all .5s;
}