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

最新推荐文章于 2025-04-01 15:25:22 发布

原创最新推荐文章于 2025-04-01 15:25:22 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #elementui #vue.js

vue2+element+echarts后台管理实战专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在ElementUI的表格中实现表头居中和加粗的效果，通过自定义CSS类名`active-header`和`table-center`来控制样式。

效果图
在这里插入图片描述
注意的地方
表头居中加粗 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;
  }
}