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

1.如图2. 代码如下<el-table:data="tableData" size="mini"borderstyle="width: 100%":header-cell-style="cellSty"class="table"><el-table-column prop="date"label="信息"align="center">

京城落灬雨烟

6909人浏览 · 2021-10-28 17:27:17

京城落灬雨烟 · 2021-10-28 17:27:17 发布

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;'
        }