效果图

注意的地方
表头居中加粗 header-cell-class-name='active-header' header-cell-class-name是element表格自带的参数
表格内居中cell-class-name="table-center"cell-class-name是el自带的参数

 <el-table :data="tableData" style="width: 100%" border header-cell-class-name='active-header' cell-class-name="table-center"> </el-table>

居中样式

   /deep/.active-header{color: #333;text-align: center;}/deep/.table-center{text-align: center;}

全部代码

 <!-- 2.产品列表 --><div class="content"><el-table :data="tableData" style="width: 100%" border header-cell-class-name='active-header' cell-class-name="table-center"><el-table-column type="selection" width="44"></el-table-column><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-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-column prop="address" label="商品描述"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" @click="handleEdit(scope.$index, scope.row)"  type="primary" icon="el-icon-edit">编辑</el-button><el-button size="mini" @click="handleDelete(scope.$index, scope.row)"  type="danger" icon="el-icon-delete">删除</el-button></template></el-table-column></el-table></div>

 tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]

.content{background-color: #fff;/deep/.active-header{color: #333;text-align: center;}/deep/.table-center{text-align: center;}
}