Ant?Design?Vue?修改表格頭部樣式的詳細(xì)代碼
更新時間：2022年10月21日 11:48:37 作者：懶啦
這篇文章主要介紹了Ant?Design?Vue?修改表格頭部樣式,首先用到的是customHeaderRow這個API，類型是一個函數(shù)，本文通過完整代碼給大家詳細(xì)講解，需要的朋友可以參考下
在網(wǎng)上搜了好多修改表格頭部樣式的，最后自己摸索出來，分享給大家，最后附上完整代碼。
首先用到的是customHeaderRow這個API，類型是一個函數(shù)
1.HTML部分
<a-table size='small' // 樣式大小 :columns="columns" :data-source="data" bordered :pagination="false" // 不顯示頁數(shù) :customHeaderRow="customRow" // 設(shè)置頭部行屬性 > </a-table>
2.js部分
customRow(column) {
console.log(conlumn); // 在這里可以在控制臺看到有一個className ，如下圖
column.forEach((e, index) => {
column[index].className = 'tableClass' // 給數(shù)組中的每一列加上一個類名
})
},
此圖是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" // 不顯示頁數(shù)
:customHeaderRow="customRow" // 設(shè)置頭部行屬性
>
</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>
到此這篇關(guān)于Ant Design Vue 修改表格頭部樣式的文章就介紹到這了,更多相關(guān)Ant Design Vue表格頭部樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue驗證碼組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
Vue-cli3項目配置Vue.config.js實戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于Vue-cli3項目配置Vue.config.js的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
vue3生成二維碼的方式有很多種,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3實現(xiàn)掃碼槍掃碼并生成二維碼的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vite中如何使用@?配置路徑別名，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue實現(xiàn)同一個頁面可以有多個router-view的方法
今天小編就為大家分享一篇vue實現(xiàn)同一個頁面可以有多個router-view的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了基于vuejs+webpack的日期選擇插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了vue項目中input輸入框輸入不了值問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)循環(huán)切換動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
vue多功能渲染函數(shù)h()的使用和多種應(yīng)用場景
我們在vue項目里面用HTML標(biāo)簽構(gòu)建頁面時最終會被轉(zhuǎn)化成vnode,而h()是直接創(chuàng)建vnode,因此h()能以一種更靈活的方式在各種各樣情景下構(gòu)建組件的渲染邏輯,并且能帶來性能方式的提升,本文介紹如何使用和列出具體的應(yīng)用場景,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue指令防止按鈕連點解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04