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