elment table静态表格 +表头居中加粗和表格内居中

战斗中的老段2023-09-20 7:09

效果图

注意的地方

表头居中加粗 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;
  }
}