快捷導(dǎo)航

Ant?Design?Vue?修改表格頭部樣式的詳細(xì)代碼

更新時(shí)間：2022年10月21日 11:48:37 作者：懶啦

這篇文章主要介紹了Ant?Design?Vue?修改表格頭部樣式,首先用到的是customHeaderRow這個(gè)API，類型是一個(gè)函數(shù)，本文通過完整代碼給大家詳細(xì)講解，需要的朋友可以參考下

在網(wǎng)上搜了好多修改表格頭部樣式的，最后自己摸索出來，分享給大家，最后附上完整代碼。
首先用到的是customHeaderRow這個(gè)API，類型是一個(gè)函數(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); // 在這里可以在控制臺看到有一個(gè)className ，如下圖
      column.forEach((e, index) => { 
      column[index].className = 'tableClass' // 給數(shù)組中的每一列加上一個(gè)類名
      })
    },

此圖是console.log(conlumn);打印出來的可以看到每一列都有一個(gè)className

此圖為conlumn打印出來的

在這里插入圖片描述

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)文章

vue驗(yàn)證碼組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue驗(yàn)證碼組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-07-07
Vue-cli3項(xiàng)目配置Vue.config.js實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于Vue-cli3項(xiàng)目配置Vue.config.js的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-07-07
基于Vue3實(shí)現(xiàn)掃碼槍掃碼并生成二維碼實(shí)例代碼
vue3生成二維碼的方式有很多種,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3實(shí)現(xiàn)掃碼槍掃碼并生成二維碼的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
vite中如何使用@?配置路徑別名
這篇文章主要介紹了vite中如何使用@?配置路徑別名，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue實(shí)現(xiàn)同一個(gè)頁面可以有多個(gè)router-view的方法
今天小編就為大家分享一篇vue實(shí)現(xiàn)同一個(gè)頁面可以有多個(gè)router-view的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
基于vuejs+webpack的日期選擇插件
這篇文章主要為大家詳細(xì)介紹了基于vuejs+webpack的日期選擇插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
vue項(xiàng)目中input輸入框輸入不了值問題及解決
這篇文章主要介紹了vue項(xiàng)目中input輸入框輸入不了值問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue實(shí)現(xiàn)循環(huán)切換動畫
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)循環(huán)切換動畫，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-10-10
vue多功能渲染函數(shù)h()的使用和多種應(yīng)用場景
我們在vue項(xiàng)目里面用HTML標(biāo)簽構(gòu)建頁面時(shí)最終會被轉(zhuǎn)化成vnode,而h()是直接創(chuàng)建vnode,因此h()能以一種更靈活的方式在各種各樣情景下構(gòu)建組件的渲染邏輯,并且能帶來性能方式的提升,本文介紹如何使用和列出具體的應(yīng)用場景,需要的朋友可以參考下
2024-08-08
vue指令防止按鈕連點(diǎn)解析
這篇文章主要介紹了vue指令防止按鈕連點(diǎn)解析，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04