Ant Design Vue 修改表格头部样式的详细代码
更新时间：2022年10月21日 11:48:37 作者：懒啦
这篇文章主要介绍了Ant Design Vue 修改表格头部样式,首先用到的是customHeaderRow这个API，类型是一个函数，本文通过完整代码给大家详细讲解，需要的朋友可以参考下
在网上搜了好多修改表格头部样式的，最后自己摸索出来，分享给大家，最后附上完整代码。
首先用到的是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表格头部样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue验证码组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
这篇文章主要给大家介绍了关于Vue-cli3项目配置Vue.config.js的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-07-07
vue3生成二维码的方式有很多种,下面这篇文章主要给大家介绍了关于如何基于Vue3实现扫码枪扫码并生成二维码的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vite中如何使用@ 配置路径别名，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
今天小编就为大家分享一篇vue实现同一个页面可以有多个router-view的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了基于vuejs+webpack的日期选择插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了vue项目中input输入框输入不了值问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家详细介绍了vue实现循环切换动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
我们在vue项目里面用HTML标签构建页面时最终会被转化成vnode,而h()是直接创建vnode,因此h()能以一种更灵活的方式在各种各样情景下构建组件的渲染逻辑,并且能带来性能方式的提升,本文介绍如何使用和列出具体的应用场景,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了vue指令防止按钮连点解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论