修改element-ui表格样式:废话不多说上代码
<div style="width:1390px;margin-top: 8px;">
<div>
<h3 style="display:inline">数据库管理</h3>
<el-button size="mini" icon="el-icon-circle-plus" style="background-color: #16469b;color: #ffffff;margin-left: 1078px;" @click="add_data">新增</el-button>
<el-button size="mini" icon="el-icon-error" style="background-color: #16469b;color: #ffffff;" @click="button_delete_data"> 删除</el-button>
</div>
<div class="shujvkuguanli_table div_boder" style="margin-top:8px;width: 1330px;">
<el-table
:data="shujvku_tableData"
height="480"
border
stripe
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="16"
:resizable="false"
>
</el-table-column>
<el-table-column
label="序号"
type="index"
:resizable="false"
align="center"
width="46"
>
</el-table-column>
<el-table-column
prop="OutsideDiameter"
:resizable="false"
align="center"
label="外径(mm)"
width="114"
>
</el-table-column>
<el-table-column
prop="WallThickness"
:resizable="false"
align="center"
label="壁厚(mm)"
width="116"
>
</el-table-column>
<el-table-column
prop="InnerDiameter"
:resizable="false"
align="center"
label="内径(mm)"
width="115"
>
</el-table-column>
<el-table-column
prop="SteelGrade"
:resizable="false"
align="center"
label="钢级"
width="117"
>
</el-table-column>
<el-table-column
prop="BuckleType"
:resizable="false"
align="center"
label="扣型"
width="115"
>
</el-table-column>
<el-table-column
prop="UnitMass"
:resizable="false"
align="center"
label="单位质量(kg/m)"
width="117"
>
</el-table-column>
<el-table-column
prop="ExtrusionStrength"
:resizable="false"
align="center"
label="抗挤强度(MPa)"
width="115"
>
</el-table-column>
<el-table-column
prop="AntiInnerPress"
:resizable="false"
align="center"
label="抗内压强度(MPa)"
width="116"
>
</el-table-column>
<el-table-column
prop="YieldStrength"
:resizable="false"
align="center"
label="屈服强度(kN)"
width="114"
>
</el-table-column>
<el-table-column
prop="TensileStrength"
:resizable="false"
align="center"
label="抗拉强度(kN)"
width="114"
>
</el-table-column>
<el-table-column
prop="DataFrom"
:resizable="false"
align="center"
label="数据来源"
width="112"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
align="center"
:resizable="false">
<template slot-scope="scope">
<el-button style="background-color: #16469b;color: #ffffff; margin-left:-8px; width: 130%;line-height: 0px !important;height: 24px !important;" @click="update(scope.row)" type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
css代码
.shujvkuguanli_table .el-table{
font-weight:500 !important;
font-size: 12px !important;
color: #232323 !important;
}
/* 数据库管理中table的样式(包含多选框和输入框) */
/* 将 上下pading值调空 */
.shujvkuguanli_table .el-table .el-table__cell {
padding: 0px 0 !important;
color: #232323;
height: 20px !important;
}
/* 将表头高度调低 */
.shujvkuguanli_table .el-table th.el-table__cell>.cell {
height: 20px !important;
background-color:#8fb0eb;
color: #232323;
font-weight:500;
}
/* 调表格内行的高度 */
.shujvkuguanli_table .el-table td.el-table__cell div {
box-sizing: border-box;
height: 20px !important;
}
/* 第一列index的样式 */
.shujvkuguanli_table .el-table--border .el-table__cell:first-child .cell {
padding-left: 0 !important;
background-color: transparent;
}
/* 斑马纹的颜色 */
.shujvkuguanli_table .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
background: #ddecff !important;
}
/* 修改斑马纹高亮颜色 */
.shujvkuguanli_table .el-table--striped .el-table__body tr.el-table__row--striped:hover > td{
background: #8fb0eb !important;
}
/* 修改非斑马纹行的高亮颜色 */
.shujvkuguanli_table .el-table__body tr:hover > td{
background-color:#8fb0eb !important;
}
/* 第一列选择框选择区域外的样式 */
.shujvkuguanli_table .el-checkbox:last-of-type {
background-color: #ffffff;
margin-top: -2px;
overflow: hidden;
}
/* 当表格里面有输入框时的样式 */
/* .shujvkuguanli_table .el-input--mini .el-input__inner {
height: 20px;
padding: 0px 0px !important;
border: 0px solid #ffffff!important;
line-height: 1px;
background-color: transparent !important;
text-align: center !important;
} */
.shujvkuguanli_table .el-checkbox__inner {
padding: 0px 0px !important;
border: 1px solid #232323;
}