VUE中调整elementUI表格的样式

修改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;
    
}

运行结果展示

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值