el-table和分页插件修改样式以及解决表头和内容歪掉的问题，最左边有表
格固定加边框线,。。。
1、可以通过el-table的属性修改样式
<el-pagination
background
:page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@current-change="selectZwrmc"
@size-change="handleSizeChange"
:current-page.sync="currentPage"
id="el-pagin"
small
/>
<el-table
:data="items"
ref="Table"
highlight-current-row
@selection-change="selectItem"
:max-height="maxHeight"
:
header-cell-
:row-
id="sqTable"
>
header-cell-style修改表头样式，可以直接写样式如:header-cell-，可以绑定⽅法，返回样式；
row-style修改⾏样式，和上⾯修改表头样式⼀样，我这⾥绑定的⽅法是rowStyle，默认传⼊当前⾏和⾏的索引
rowStyle({ row, rowIndex }) {
return {
height: "25px",
padding: "0px 0px 0px 0px",
};
},
2、可以通过style修改样式，需要注意的是表头的下边框线要⽤0.5px才能显⽰如border-bottom: 0.5px solid #c0c4cc；我试过1px是不可以的。>>>穿透挺好⽤的。有时候内容和表头会歪掉，
.el-table >>> th.gutter {
display: table-cell !important;
}
⽤上⾯样式可以调好。
也可以把表格设成⾏内元素，即也可以解决歪掉问题，也可以去掉最下边的边框线
有时候表格最右侧会有.gutter的格⼦
.el-table >>> th.gutter {
display: none !important;
}
可以去除表格最右侧会有.gutter的格⼦
有时候表格最下⽅有⼀条边框线超出了cell的范围
加下⾯样式可以去掉最下边的边框线
.el-table__row > td {
border: none;
}
.el-table::before {
height: 0px;
}
样式都是需要灵活运⽤的，以实现⾃⼰的业务需求。
下⾯⽤到id选择器都是我⾃⼰加的，类选择器是elementUI⾃带的
<style scoped >
.el-table >>> th {
background-color: #e4e7ed;
border-top: 1px solid #c0c4cc;
border-right: 1px solid #c0c4cc;
border-bottom: 0.5px solid #c0c4cc;
}
.el-table >>> td {
border-right: 1px solid #c0c4cc;
border-bottom: 0.5px solid #c0c4cc;
}
#sqTable >>> td {
padding: 0px;
font-size: 12px;
}
#sqTable >>> th {
padding: 0px;
height: 30px;
}
#el-pagin >>> * {
font-size: 12px;
}
.el-table >>> th.gutter {
display: table-cell !important;
}
#sqTable >>> thead .el-table-column--selection {
border-left: 1px solid #c0c4cc;
}
#sqTable >>> tbody .el-table-column--selection {
border-left: 1px solid #c0c4cc;
}
#sqTable >>> tbody td {
border-right: 1px solid #c0c4cc;
border-bottom: 1px solid #c0c4cc;
}
</style>
如果第⼀列不是选择框，可以⽤以下样式修改样式
.el-table >>> tbody td:nth-of-type(1) {
border-left: 1px solid #c0c4cc;
}
.el-table >>> th:nth-of-type(1) {
border-left: 1px solid #c0c4cc;
}
3、最左边有表格固定加边框线
加了fixed属性之后
可以通过header-cell-style来设置，注意边框线要⼤⼀点，⽐如1.5px，要不然会被隐藏掉<el-table
:data="items"
ref="Table"
id="zqqlmxbzd"
:
max-height="maxHeight"
@selection-change="selectItem"
:header-cell-
>
tableCellStyle({ row, column, rowIndex, columnIndex }) {
if (rowIndex == 0 && columnIndex == 0) {
return {
"border-bottom": "1.5px solid #c0c4cc",
"text-align": "center",
};
} else {
return {
"text-align": "center",
};
}
},
或者css中加样式
.el-table >>> th:nth-of-type(1) {
border-left: 1px solid #c0c4cc;
border-bottom: 1.5px solid #c0c4cc;
table设置内边框}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。