欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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中同時操作多項(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)文章

最新評論