vue+element el-table表头修改背景色 表头内容居中 表单内容居中 表格带有纵向边框

先看案例 el-table的原本的样子 

 el-table表头修改背景色 el-table表头修改字体颜色

:header-cell-style="{ background: '#EEF1F4', color: '#646a73' }"

el-table增加纵向边框

border

  <el-table 
    :data="tableData"
     style="width: 100%"
      border
     :header-cell-style="{ background: '#EEF1F4', color: '#646a73' }"
     
    >
      <el-table-column label="账号" prop="date">
      </el-table-column>
      <el-table-column label="到期时间" prop="name">
      </el-table-column>
      <el-table-column align="right" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>

表头内容居中 表单内容居中

/* 表头内容如何居中 */
 ::v-deep .el-table th.el-table__cell>.cell {
    text-align: center;
}
 
/* 表格内容如何居中 */
 ::v-deep .el-table td.el-table__cell div {
   text-align: center;
} 

修改完的样式

 

总结：

el-table表头修改背景色 el-table表头修改字体颜色
border
:header-cell-style="{ background: '#EEF1F4', color: '#646a73' }"
/* 表头内容如何居中 */
 ::v-deep .el-table th.el-table__cell>.cell {
    text-align: center;
}
/* 表格内容如何居中 */
 ::v-deep .el-table td.el-table__cell div {
   text-align: center;
}