如何去掉el-table中自带的边框线
作者：边洛洛
文章介绍了如何去掉Element UI中el-table组件自带的边框线,通常情况下,el-table没有添加border属性,但仍然会出现边框线,可能的原因包括ElementUI的默认样式或表格的某些内置样式,感兴趣的朋友跟随小编一起看看吧
1.问题:el-table中自带的边框线
2.解决后的效果:
3.分析:明明在el-table中没有添加border,但是会出现边框线.
可能的原因: 由 Element UI 的默认样式或者表格的某些内置样式引起的。比如,<el-table> 会通过 border-collapse 或 border-spacing 等属性影响边框的显示。
4.具体代码
样式修改
/* 去掉表格整体左边和上边的线 */
.el-table--group, .el-table--border {
border: none
}
/* 去掉表格整体最下面的边框 */
.el-table::before {
width: 0;
height: 0;
}
/* 去掉表格整体最右边的边框 */
.el-table--group::after, .el-table--border::after {
width: 0;
height: 0;
}
/* 去掉表格横向的边框线 */
::v-deep .el-table th.el-table__cell.is-leaf,
::v-deep .el-table td.el-table__cell {
border: none;
}
/* 去掉表头上的边框线 */
::v-deep .el-table--border th.el-table__cell {
border: none;
}
/* 去掉表格纵向的边框线 */
.el-table--border .el-table__cell {
border-right: none;
}
/* 表头高度 */
::v-deep(.el-table th.el-table__cell) {
min-height: 0 !important;
padding: 0 !important;
height: 23px !important;
line-height: 23px;
}渲染模板
<el-table :data="tempData" :header-cell-style="{background: '#fff'}" :header-row-style="{height: '23px'}">
<el-table-column label="排名" prop="rank" align="center" width="50"/>
<el-table-column label="注册号" prop="num" align="center" width="70"/>
<el-table-column label="姓名" prop="name">
<template slot-scope="scope">
<el-input v-if="isEditing" v-model="scope.row.name" @input="updateData(scope.row)"/>
<span v-else>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="代表队" prop="team" align="center" width="140"></el-table-column>
<el-table-column label="组" prop="series" align="center">
<el-table-column v-for="(item, index) in 6" :key="index" :label="`${index + 1}`" align="center" width="70">
<template slot-scope="scope">
<!-- 判断是否编辑状态 -->
<el-input
v-if="isEditing"
v-model="scope.row.series[index]"
@input="updateData(scope.row)"
/>
<span v-else>{{ scope.row.series[index] }}</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="总计" prop="total" align="center" width="80">
<template slot-scope="scope">
<el-input v-if="isEditing" v-model="scope.row.total" @input="updateData(scope.row)"/>
<span v-else>{{ scope.row.total }}</span>
</template>
</el-table-column>
<el-table-column label="备注" prop="remarks" align="center" width="130"></el-table-column>
</el-table>到此这篇关于如何去掉el-table中自带的边框线的文章就介绍到这了,更多相关去掉el-table边框线内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！