亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

antd實(shí)現(xiàn)table組件選中單行換樣式(比如背景顏色)

 更新時(shí)間:2024年03月22日 10:24:07   作者:六卿  
這篇文章主要介紹了antd實(shí)現(xiàn)table組件選中單行換樣式(比如背景顏色),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

antd中table組件選中單行換樣式

項(xiàng)目中有一個(gè)需求,點(diǎn)擊某一行后,將改行的背景顏色換掉,換成一個(gè)比較醒目的顏色。

首先看了看官方,官方還是比較可愛可親的,都給我們準(zhǔn)備好了

onRow 用法

適用于 onRow onHeaderRow onCell onHeaderCell

<Table
  onRow={record => {
    return {
      onClick: event => {}, // 點(diǎn)擊行
      onDoubleClick: event => {},
      onContextMenu: event => {},
      onMouseEnter: event => {}, // 鼠標(biāo)移入行
      onMouseLeave: event => {},
    };
  }}
  onHeaderRow={(columns, index) => {
    return {
      onClick: () => {}, // 點(diǎn)擊表頭行
    };
  }}
/>

很明顯 這個(gè)屬性對(duì)應(yīng)的是一個(gè)回調(diào)函數(shù),這個(gè)回調(diào)函數(shù)是有兩個(gè)參數(shù)的

  • 第一個(gè)參數(shù)是當(dāng)前行的信息
  • 第二個(gè)參數(shù)是當(dāng)前行在table數(shù)組中的下標(biāo)index

我們這倆主要數(shù)onClick這個(gè)事件,當(dāng)我們給onRow賦值為一個(gè)回調(diào)函數(shù)之后,回調(diào)函數(shù)會(huì)執(zhí)行,返回一個(gè)對(duì)象

{
      onClick: event => {}, // 點(diǎn)擊行
      onDoubleClick: event => {},
      onContextMenu: event => {},
      onMouseEnter: event => {}, // 鼠標(biāo)移入行
      onMouseLeave: event => {},
    }

當(dāng)我們單擊的時(shí)候執(zhí)行onClick;

后面四個(gè)分別是鼠標(biāo)雙擊、鼠標(biāo)右鍵、鼠標(biāo)移入和鼠標(biāo)移出;

我們這倆將onClick后面換成自己的自定義事件

上代碼:

 <AAATable
         size={'default'}
         columns={columnsThird} //表格的列
         dataSource={dataTableThird} //表格渲染的數(shù)據(jù)
         title={'INCLUDE列表'} //表格的名字
         onChange={this.onChangeTableThird} //可以固定使用
         total={totalThird}
         pageSize={pageSizeThird}
         current={currentPageThird}
         showTotal={true}
         rowClassName={this.rowClassNameFun}
         onRow={
              (record, index) => {
                  return {
                      onClick: _ => { this.zjq(record, index) }, // 點(diǎn)擊行
                          };
              }}
 />

我們?cè)趜jq這個(gè)函數(shù)中能獲取到當(dāng)前點(diǎn)擊的行內(nèi)容和行下標(biāo);

    zjq = (rowItem, index) => {
        console.log("LiuQing")
        this.setState({
            index
        })
    }

我們?cè)跔顟B(tài)機(jī)中存儲(chǔ)一下index,用于判斷哪個(gè)下標(biāo)顯示突出的背景顏色

	state={
		index:""
	}

rowClassName

下面就該說table的另一個(gè)屬性了行類名rowClassName,這個(gè)屬性對(duì)應(yīng)的也是一個(gè)函數(shù),這個(gè)函數(shù)的默認(rèn)兩個(gè)參數(shù)同樣是當(dāng)前行內(nèi)容和當(dāng)前行下標(biāo),返回值為string也就是我們的類名即可。

我們可以使用index完美的得到哪一行被點(diǎn)擊了

rowClassName={this.rowClassNameFun}
    rowClassNameFun = (record, index) => {
        console.log(record, index, "rowClassNameFun")
        if (index === this.state.index)
            return 'mySelfClassName'
    }

最后就是引入樣式文件

import './index.less'
	.mySelfClassName{
  	  background-color: red;
	}

總結(jié)

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue路由攔截及頁(yè)面跳轉(zhuǎn)的設(shè)置方法

    vue路由攔截及頁(yè)面跳轉(zhuǎn)的設(shè)置方法

    這篇文章主要介紹了vue路由攔截及頁(yè)面跳轉(zhuǎn)的設(shè)置方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-05-05
  • Vue彈窗組件的實(shí)現(xiàn)方法

    Vue彈窗組件的實(shí)現(xiàn)方法

    這篇文章主要為大家詳細(xì)介紹了Vue彈窗組件的實(shí)現(xiàn)方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-09-09
  • Vue下拉選擇框Select組件使用詳解(二)

    Vue下拉選擇框Select組件使用詳解(二)

    這篇文章主要為大家詳細(xì)介紹了Vue下拉選擇框Select組件的使用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • Vue3+vantUI3時(shí)間組件封裝過程支持選擇年以及年月日時(shí)分秒

    Vue3+vantUI3時(shí)間組件封裝過程支持選擇年以及年月日時(shí)分秒

    這篇文章主要介紹了Vue3+vantUI3時(shí)間組件封裝過程支持選擇年以及年月日時(shí)分秒,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
    2024-07-07
  • Vue在css中圖片路徑問題解決的配置方法

    Vue在css中圖片路徑問題解決的配置方法

    這篇文章主要為大家介紹了Vue在css中圖片路徑問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-06-06
  • 關(guān)于SpringBoot與Vue交互跨域問題解決方案

    關(guān)于SpringBoot與Vue交互跨域問題解決方案

    最近在利用springboot+vue整合開發(fā)一個(gè)前后端分離的個(gè)人博客網(wǎng)站,所以這一篇總結(jié)一下在開發(fā)中遇到的一個(gè)問題,關(guān)于解決在使用vue和springboot在開發(fā)前后端分離的項(xiàng)目時(shí),如何解決跨域問題。在這里分別分享兩種方法,分別在前端vue中解決和在后臺(tái)springboot中解決。
    2021-10-10
  • vue element Cascader級(jí)聯(lián)選擇器解決最后一級(jí)顯示空白問題

    vue element Cascader級(jí)聯(lián)選擇器解決最后一級(jí)顯示空白問題

    這篇文章主要介紹了vue element Cascader級(jí)聯(lián)選擇器解決最后一級(jí)顯示空白問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • C#實(shí)現(xiàn)將一個(gè)字符轉(zhuǎn)換為整數(shù)

    C#實(shí)現(xiàn)將一個(gè)字符轉(zhuǎn)換為整數(shù)

    下面小編就為大家分享一篇C#實(shí)現(xiàn)將一個(gè)字符轉(zhuǎn)換為整數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2017-12-12
  • 如何在Vue.JS中使用圖標(biāo)組件

    如何在Vue.JS中使用圖標(biāo)組件

    這篇文章主要介紹了如何在Vue.JS中使用圖標(biāo)組件,文中講解非常細(xì)致,代碼幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下
    2020-08-08
  • Vue實(shí)現(xiàn)簡(jiǎn)單搜索功能的示例代碼

    Vue實(shí)現(xiàn)簡(jiǎn)單搜索功能的示例代碼

    在vue項(xiàng)目中,搜索功能是我們經(jīng)常需要使用的一個(gè)場(chǎng)景,最常用的是在列表數(shù)據(jù)中搜索一個(gè)想要的,今天的例子就是我們實(shí)現(xiàn)vue從列表數(shù)據(jù)中搜索,希望對(duì)大家有所幫助
    2023-03-03

最新評(píng)論