請問如何修改element表頭的樣式？瀏覽器頁面不顯示出應有的樣式

檢查你的style標簽中是否含有scoped屬性, 因為含有scoped標簽只能對當前組件的樣式生效, 你需要再寫一個style標簽把你需要的樣式寫在里面

    <style>
          .el-table th{
            background:#f4f4f4 !important;
            font-size: large;
           }
    </style>

推薦給當前組件添加id或class,以避免全局樣式的污染.

    <style>
          .my-table.el-table th{
            background:#f4f4f4 !important;
            font-size: large;
           }
    </style>

解決了問題記得給個贊哦~

樓主說的項目中，應該是指“組件內”吧？

在組件內使用其它組件的時候，有些樣式的設置是無效的。
比如你的test.vue中使用了el-table這個組件，但 .el-table th 這個元素在test.vue中并不存在，而是在el-table這個組件內，那么，你在test.vue 中設置 .el-table th的樣式是無效的，這應該跟vue的渲染機制有關。

把.el-table th的樣式寫到全局的css文件中就好了。

解決方案
樣式：

.el-table .table-head-th{
        background-color:#f4f4f4;
        font-size: large;
    }

表格：

<el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-class-name="tableheaderClassName"
          border>
          <el-table-column
            prop="doc"
            label="文件名稱"
            width="290"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="發(fā)起人"
            width="290"
            header-align="center">
          </el-table-column>
          <el-table-column
            prop="situation"
            label="文件狀態(tài)"
            width="290"
            header-align="center">
          </el-table-column>
          </el-table>

javascript :

export default {
    methods: {
        tableheaderClassName({ row, rowIndex }) {
          return "table-head-th";
        },
        ....
    },
    data(){
      return { ... }
    }
}

遇到同樣的問題，請問解決了嗎