欧美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中同時操作多項，可能需要在前面添加checkbox，今天在項目終于到一個坑，使用的是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)文章

最新評論