antd vue 如何調(diào)整checkbox默認樣式
antd vue 調(diào)整checkbox默認樣式
// 鼠標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; } // 設置默認的顏色 .ant-checkbox{ .ant-checkbox-inner{ border: 2px solid #1BBA79; background-color: transparent; } } // 設置選中的顏色 .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ù)表示當前行的數(shù)據(jù),第一表示的是數(shù)據(jù)中的key值,這個就很關鍵,如果你的數(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}) }
總結
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue3 composition API實現(xiàn)邏輯復用的方法
本文主要介紹了Vue3 composition API實現(xiàn)邏輯復用的方法,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-08-08解決vue cli4升級sass-loader(v8)后報錯問題
這篇文章主要介紹了解決vue cli4升級sass-loader(v8)后報錯問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07LRU算法在Vue內(nèi)置組件keep-alive中的使用
LRU算法全稱為least recently use 最近最少使用,核心思路是最近被訪問的以后被訪問的概率會變高,那么可以把之前沒被訪問的進行刪除,維持一個穩(wěn)定的最大容量值,從而不會導致內(nèi)存溢出。2021-05-05