Ant Design Vue （3.2.0）table组件：修改表头样式

四月迩安

于 2024-03-15 10:42:35 发布

阅读量1.8k

点赞数 5

分类专栏：笔记 antd vue 文章标签： vue.js javascript 前端 anti-design-vue

本文链接：https://blog.csdn.net/sy979/article/details/136732765

版权

笔记同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

antd vue

1 篇文章 0 订阅

订阅专栏

一、在columns的配置里面，给需要配置的列头添加customHeaderCell属性。
示例1：

<a-table :columns="columns" 
……
const columns = [
{
        title: 'Contact',
        dataIndex: 'name',
        width: 300,
        align: 'left',
        customHeaderCell: () => ({ style: { paddingLeft: '68px' } }),
    },
……

二、设置自定义column名称
示例1：

<a-table :columns="yourName"
……
import type { TableColumn } from '@/typing';
……
const yourName: TableColumn[] = [
    {
     	title: 'Contact',
        dataIndex: 'name',
        ……
        },
];