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状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
这篇文章主要介绍了Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面),本文通过实例代码文字说明给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03vue+element-ui JYAdmin后台管理系统模板解析
这篇文章主要介绍了vue+element-ui JYAdmin后台管理系统模板解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-07-07Vue使用vue-area-linkage实现地址三级联动效果的示例
很多时候我们需要使用地址三级联动,即省市区三级联动,这篇文章主要介绍了Vue使用vue-area-linkage实现地址三级联动效果的示例,感兴趣的小伙伴们可以参考一下2018-06-06
最新评论