antd vue 如何調(diào)整checkbox默認(rèn)樣式
antd vue 調(diào)整checkbox默認(rèn)樣式
// 鼠標(biāo)hover時(shí)候的顏色
.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中同時(shí)操作多項(xiàng)，可能需要在前面添加checkbox，今天在項(xiàng)目終于到一個(gè)坑，使用的是antd組件庫，但是在按照官網(wǎng)的例子引入時(shí)，發(fā)現(xiàn)點(diǎn)擊其中某一行的checkbox，會(huì)將所有行的checkbox同時(shí)選中
在查閱官方文檔后，發(fā)現(xiàn)有一個(gè)selectedRowKeys屬性，文檔上說selectedRowKeys需要和onChange 進(jìn)行配合進(jìn)行配合使用，onChange方法有兩個(gè)參數(shù)function(selectedRowKeys, selectedRows)，第二個(gè)參數(shù)表示當(dāng)前行的數(shù)據(jù)，第一表示的是數(shù)據(jù)中的key值，這個(gè)就很關(guān)鍵，如果你的數(shù)據(jù)中沒有綁定key這個(gè)字段，那么這個(gè)參數(shù)輸出的就是undefined，所有需要在數(shù)據(jù)中綁定一個(gè)唯一的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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-property-decorator的簡單知識(shí),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
微信的浮窗，大伙應(yīng)該都用過，當(dāng)我們正在閱讀一篇公眾號(hào)文章時(shí)，突然需要處理微信消息，點(diǎn)擊浮窗，在微信上會(huì)有個(gè)浮標(biāo)，點(diǎn)擊浮標(biāo)可以再次回到文章。今天小編抽空給大家介紹vue 實(shí)現(xiàn)微信浮標(biāo)效果，感興趣的朋友一起看看吧2019-09-09
vue $attrs和$listeners的使用與區(qū)別
本文主要介紹了vue $attrs和$listeners的使用與區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
封裝 axios+promise通用請(qǐng)求函數(shù)操作
這篇文章主要介紹了封裝 axios+promise通用請(qǐng)求函數(shù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue項(xiàng)目index.html中使用環(huán)境變量的代碼示例
在Vue3中使用環(huán)境變量的方式與Vue2基本相同,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目index.html中使用環(huán)境變量的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
這篇文章主要為大家介紹了Vue布置導(dǎo)航守衛(wèi)獲取用戶信息，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
vue使用assign巧妙重置data數(shù)據(jù)方式
這篇文章主要介紹了vue使用assign巧妙重置data數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue實(shí)現(xiàn)淘寶購物車三級(jí)選中功能詳解
這篇文章主要介紹了通過Vue實(shí)現(xiàn)淘寶購物車中三級(jí)選中的功能，文中的實(shí)現(xiàn)過程講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，感興趣的可以了解一下2022-01-01
這篇文章主要介紹了vue+elementUI下拉框回顯問題及解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
Vue如何將當(dāng)前窗口截圖并將數(shù)據(jù)base64轉(zhuǎn)為png格式傳給服務(wù)器
這篇文章主要介紹了Vue如何將當(dāng)前窗口截圖并將數(shù)據(jù)base64轉(zhuǎn)為png格式傳給服務(wù)器,通過實(shí)例代碼介紹了將當(dāng)前窗口截圖,并將數(shù)據(jù)存儲(chǔ)下來,需要的朋友可以參考下2023-10-10