element表头设置背景色和居中显示

最新推荐文章于 2024-08-16 17:45:38 发布

不吃肥肉的小潘哥

最新推荐文章于 2024-08-16 17:45:38 发布

阅读量1.1k

点赞数 1

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/pan396365044/article/details/106553073

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述
方法：在el-table中设置

:cell-style="cellClass"
:header-cell-style="headClass"

具体

<el-table
          :data="tableData"
          border
          size="mini"
          stripe
          :header-cell-style="headClass"
        >
          <el-table-column
            prop="year"
            label="行业"
            align="center"
            width="70"
            style="background:#ffffff !important;"  //粗暴给某个特殊单元格设置背景色
          >
            <el-table-column
              prop="year"
              label="时间"
              align="center"
              width="70"
              style="background:#ffffff;"
            >
              <template slot-scope="scope">
                {{ scope.row.year }}年
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column
            prop="keyun_number"
            label="客运"
            align="center"
            width="65"
          >
          </el-table-column>

          <el-table-column
            prop="huoyun_number"
            label="货运"
            align="center"
            width="65"
          >
          </el-table-column>

          <el-table-column
            prop="weiyun_number"
            label="危运"
            align="center"
            width="65"
          >
          </el-table-column>

          <el-table-column
            prop="yayun_number"
            label="押运"
            align="center"
            width="65"
          >
          </el-table-column>

          <el-table-column
            prop="gongjiao_number"
            label="公交"
            align="center"
            width="65"
          >
          </el-table-column>

          <el-table-column
            prop="wangyue_number"
            label="网约"
            align="center"
            width="65"
          >
          </el-table-column>

          <el-table-column
            prop="chuzu_number"
            label="巡游出租"
            align="center"
            width="69"
          >
          </el-table-column>
        </el-table>

	//背景色
    headClass() {
      return "background-color:#d0f0fc;color:#000000;";
    },
    //居中
    cellClass() {
     return 'text-align: center;'
    }