el-table 自定义表头及样式设置

最新推荐文章于 2024-08-08 14:20:22 发布

京城烟雨灬落

最新推荐文章于 2024-08-08 14:20:22 发布

阅读量7k

点赞数 1

分类专栏： vue 知识 element-ui 文章标签： vue elementui css

本文链接：https://blog.csdn.net/qq_42174597/article/details/121019084

版权

vue 知识同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

element-ui

12 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用Element UI库创建一个包含多级信息的表格，并详细说明了如何通过`header-cell-style`属性定制表格头部的样式，包括字体大小、颜色和背景色等，以实现不同行高亮显示的效果。

摘要由CSDN通过智能技术生成

1.如图

2. 代码如下

    <el-table   :data="tableData" size="mini"  border   style="width: 100%" 
            :header-cell-style="cellSty"
            class="table"
          >
            <el-table-column prop="date"   label="信息"  align="center">  
              <el-table-column  prop="projectName" label="名称"  align="center"> </el-table-column>
              <el-table-column  prop="auditTypeName" label="类型"  align="center"> </el-table-column> 
              <el-table-column  prop="name" label="时间"  align="center"> </el-table-column> 
              <el-table-column  prop="name" label="资金量（万元）" width="140" align="center"> </el-table-column> 
           
            </el-table-column>
            
            <el-table-column prop="date"  label="单位信息" align="center">  
              <el-table-column  prop="deptName" label="单位名称"  align="center"> </el-table-column>
              <el-table-column  prop="name" label="领导" width="120" align="center"> 
                  <el-table-column  prop="name" label="姓名" width="60" align="center"> </el-table-column>
                  <el-table-column  prop="name" label="电话" width="60" align="center"> </el-table-column>
              </el-table-column>
              <el-table-column  prop="name" label="负责人" width="120" align="center"> 
                  <el-table-column  prop="name" label="姓名" width="60" align="center"> </el-table-column>
                  <el-table-column  prop="name" label="电话" width="60" align="center"> </el-table-column>
              </el-table-column>

            </el-table-column>

            <el-table-column prop="date"  label="机构信息" align="center">  
                 <el-table-column  prop="name" label="名称"  align="center"> </el-table-column>
                  <el-table-column  prop="name" label="负责人" width="120" align="center"> 
                      <el-table-column  prop="name" label="姓名" width="60" align="center"> </el-table-column>
                      <el-table-column  prop="name" label="电话" width="60" align="center"> </el-table-column>
                  </el-table-column>
                  <el-table-column  prop="name" label="负责人" width="120" align="center"> 
                      <el-table-column  prop="name" label="姓名" width="60" align="center"> </el-table-column>
                      <el-table-column  prop="name" label="电话" width="60" align="center"> </el-table-column>
                  </el-table-column>
            </el-table-column>

            <el-table-column prop="date"  label="信息"  align="center">  
                <el-table-column  prop="name" label="处室"  align="center"> </el-table-column>
                <el-table-column  prop="name" label="负责人" width="120" align="center"> 
                    <el-table-column  prop="name" label="姓名" width="60" align="center"> </el-table-column>
                    <el-table-column  prop="name" label="电话" width="60" align="center"> </el-table-column>
                </el-table-column>
                <el-table-column  prop="name" label="负责人" width="120" align="center"> 
                    <el-table-column  prop="name" label="姓名" width="60" align="center"> </el-table-column>
                    <el-table-column  prop="name" label="电话" width="60" align="center"> </el-table-column>
                </el-table-column>
            </el-table-column>


</el-table>


//调用样式的方法
 cellSty({row,rowIndex}){
       console.log(row,rowIndex)
        if(rowIndex==0){
          return 'font-size:14px;color:#797979;background: #fff;'
        }
        if(rowIndex==1){
            return 'font-size:13px;color:#797979;background: #fff;'
        }
        if(rowIndex==2){
            return 'font-size:12px;color:#797979;background: #fff;'
        }