网站建设界面建议北京网站优化技术

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-inputv-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>