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

antd vue 如何調(diào)整checkbox默認(rèn)樣式

 更新時(shí)間：2022年12月02日 15:01:28   作者：YaaLee_  
這篇文章主要介紹了antd vue 如何調(diào)整checkbox默認(rèn)樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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)文章

最新評(píng)論