element-ui的el-table属性修改,如内边框,斑马纹,列宽度...
el-table-column prop="date" label="日期" width="180">2.在methods中写,根据判断你可以自由设置单数行还是双数行变颜色。这个用来取消表格里面td的边框。这个用来取消表格头部tr的标签。3.在style里面写样式。每天学一点,迟早成仙!其次取消表格内部边框。
首先,设置表格外边框:
<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>
每天学一点,迟早成仙!!!
更多推荐
所有评论(0)