首先，设置表格外边框：
<el-table :data="tableData" style="width: 100%" border>
<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>
其次取消表格内部边框
这个用来取消表格里面td的边框
::v-deep .el-table__row > td {
/* 去除表格线 */
border: none;
}
这个用来取消表格头部tr的标签
<el-table header-cell-style="border:none"></el-table>
斑马纹
自定义颜色
1.
<el-table :row-class-name="tableRowClassName"></el-table>
2.在methods中写，根据判断你可以自由设置单数行还是双数行变颜色
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 0) {
return "warning-row";
} else {
return "";
}
},
3.在style里面写样式
::v-deep .el-table__row.warning-row {
background: red;
}
设置表格内部宽高
设置行高
<el-table :row-style="{ height: '54px' }">
设置列宽
<el-table-column prop="name" width="300px"></el-table-column>
</el-table>文章来源：https://www.toymoban.com/news/detail-520681.html
每天学一点，迟早成仙!!!文章来源地址https://www.toymoban.com/news/detail-520681.html
到了这里，关于element-ui的el-table属性修改，如内边框，斑马纹，列宽度...的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
