vue3+element puls全局修改表头样式(背景色,表头文字)统一管理样式

1,900 阅读1分钟

技术栈基于:vue3 + element plus + vite

第一步:在src/utils/tools中封装一个函数

// 设置表头样式
export function tableHeaderCellStyle({ row, column, rowIndex, columnIndex }: never) {

    return {
      color: 'black',
      fontWeight: 'bold',
      background: '#F2F2F2'
    };
}

第二步: 在main.ts中将方法挂载到全局

import { tableHeaderCellStyle } from '@/utils/tools'
app.config.globalProperties.tableHeaderCellStyle = tableHeaderCellStyle;

第三步:在文件DOM中使用

<el-table
    :header-cell-style="tableHeaderCellStyle"
>

实现效果

image.png