antd vue 如何調(diào)整checkbox默認(rèn)樣式
antd vue 調(diào)整checkbox默認(rèn)樣式
// 鼠標(biāo)hover時候的顏色 .ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner{ border: 2px solid #1BBA79 !important; } // 設(shè)置默認(rèn)的顏色 .ant-checkbox{ .ant-checkbox-inner{ border: 2px solid #1BBA79; background-color: transparent; } } // 設(shè)置選中的顏色 .ant-checkbox-checked .ant-checkbox-inner, .ant-checkbox-indeterminate .ant-checkbox-inner { background-color: #1BBA79; border: 2px solid #1BBA79; }
antd中table內(nèi)添加checkbox踩坑
table是一些管理系統(tǒng)經(jīng)常需要使用的組件,如果想要在table中同時操作多項(xiàng),可能需要在前面添加checkbox,今天在項(xiàng)目終于到一個坑,使用的是antd組件庫,但是在按照官網(wǎng)的例子引入時,發(fā)現(xiàn)點(diǎn)擊其中某一行的checkbox,會將所有行的checkbox同時選中
在查閱官方文檔后,發(fā)現(xiàn)有一個selectedRowKeys屬性,文檔上說selectedRowKeys需要和onChange 進(jìn)行配合進(jìn)行配合使用,onChange方法有兩個參數(shù)function(selectedRowKeys, selectedRows),第二個參數(shù)表示當(dāng)前行的數(shù)據(jù),第一表示的是數(shù)據(jù)中的key值,這個就很關(guān)鍵,如果你的數(shù)據(jù)中沒有綁定key這個字段,那么這個參數(shù)輸出的就是undefined,所有需要在數(shù)據(jù)中綁定一個唯一的key值,可以和數(shù)據(jù)中的id保持一直。
具體代碼:
const { selectedRowKeys } = this.state const rowSelection = { ? ? selectedRowKeys, ? ? onChange:this.onSelectChange }
<Table ? ? ?columns={this.state.columns} ? ? ?dataSource={this.state.auditCommonModelLists} ? ? ?rowSelection={rowSelection} />
onSelectChange = (selectedRowKeys, selectedRows) => { ? ? ? ? // console.log(selectedRowKeys, selectedRows) ? ? ? ? this.setState({selectedRowKeys}) }
總結(jié)
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用高德地圖實(shí)現(xiàn)實(shí)時定位天氣預(yù)報(bào)功能
這篇文章主要介紹了vue使用高德地圖實(shí)現(xiàn)實(shí)時天氣預(yù)報(bào)功能,根據(jù)定位功能,使用高德地圖實(shí)現(xiàn)定位當(dāng)前城市的天氣預(yù)報(bào)功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05vue3 添加編輯頁使用 cron 表達(dá)式生成方法小結(jié)
這篇文章主要介紹了vue3 添加編輯頁使用 cron 表達(dá)式生成方法小結(jié),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12Vue中axios的封裝(報(bào)錯、鑒權(quán)、跳轉(zhuǎn)、攔截、提示)
這篇文章主要介紹了Vue中axios的封裝(報(bào)錯、鑒權(quán)、跳轉(zhuǎn)、攔截、提示),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08Vue3 composition API實(shí)現(xiàn)邏輯復(fù)用的方法
本文主要介紹了Vue3 composition API實(shí)現(xiàn)邏輯復(fù)用的方法,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-08-08解決vue cli4升級sass-loader(v8)后報(bào)錯問題
這篇文章主要介紹了解決vue cli4升級sass-loader(v8)后報(bào)錯問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07LRU算法在Vue內(nèi)置組件keep-alive中的使用
LRU算法全稱為least recently use 最近最少使用,核心思路是最近被訪問的以后被訪問的概率會變高,那么可以把之前沒被訪問的進(jìn)行刪除,維持一個穩(wěn)定的最大容量值,從而不會導(dǎo)致內(nèi)存溢出。2021-05-05