Ant Design Vue 修改表格头部样式

在网上搜了好多修改表格头部样式的，最后自己摸索出来，分享给大家，最后附上完整代码。
首先用到的是customHeaderRow这个API，类型是一个函数

1.HTML部分

<a-table
size='small' // 样式大小
:columns="columns"
:data-source="data"
bordered
:pagination="false"  // 不显示页数
:customHeaderRow="customRow" // 设置头部行属性
>
</a-table>

2.js部分

customRow(column) {console.log(conlumn); // 在这里可以在控制台看到有一个className ，如下图column.forEach((e, index) => { column[index].className = 'tableClass' // 给数组中的每一列加上一个类名})},

此图是console.log(conlumn);打印出来的可以看到每一列都有一个className

3.css部分

/deep/.tableClass {background: #cccccc !important;
}

4.完整代码

<template>
<a-table
size="small"
:columns="columns"
:data-source="data"
bordered
:pagination="false"  // 不显示页数
:customHeaderRow="customRow" // 设置头部行属性
>
</a-table>
</template>
<script>
export default {methods:{customRow(column) {console.log(conlumn);column.forEach((e, index) => {column[index].className = 'tableClass'})},
}
}
</script><style lang="less" scoped>
/deep/.tableClass {background: #cccccc !important;
}
</style>

Ant Design Vue 修改表格头部样式相关推荐

ant design vue table表格组件实现隔行变色
ant design vue table表格组件实现隔行变色一.使用方法 html代码: <a-table:columns="patient":data-source=&q ...
vue3 antd table表格样式修改——ant design vue table表格的行高调整
vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用场景复现实际操作解决a-table表格padding过宽知识调用文章中可能会 ...
Ant Design Vue list表格组件
文章目录 1.案例部分代码 2. 简述 3.案例代码 1.案例部分代码 <a-table:columns="columns":row-key="record =&g ...
Ant Design vue 改变表格背景颜色
写这篇文章之前,我已经和经理掰扯半天了.我实现的代码写成文档,复制到他的电脑上没效果.我自己的电脑就可以实现功能.一开始我写的代码也没有效果,但改来改去突然就可以了,写成原来的样子也可以实现了,没研究 ...
Ant Design Vue笔记——表格详情
1.表格中添加详情按钮 <template><a-tableref="table"size="middle"borderedrowKey=&q ...
Ant Design Vue子表格展开只展开一行，其他行折叠
背景因为我的子列表数据都是用的一个变量,所以需要折叠其他的,要不然多个表格展开后,数据渲染都是一样的下列列表是只可以展开一列的: 第一步: 直接抄我箭头指的那三行即可 :row-key=" ...
Ant Design Vue table表格点击行选中多选框
参考官方文档,实现点击行选中前边的多选框 <template><div><a-table :rowSelection="{selectedRowKeys: se ...
解决ant design vue中的modal弹框样式修改无效问题修改modal样式无效
ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的原因在于弹框modal被挂载在最大的元素div外面了所以需要将挂载在某个html元素上在modal外 ...
Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选
原因分析在我们使用 Ant Design Vue 表格筛选功能时会发现,如果只是按照例子来,只是前端的按页筛选,并不能都进行全局筛选,原因有两点: 1.我们筛选的时候,只是进行前端的数据过滤,并没有 ...

Ant Design Vue 修改表格头部样式

1.HTML部分

2.js部分

3.css部分

4.完整代码

Ant Design Vue 修改表格头部样式相关推荐

最新文章

热门文章