antd?vue怎么調整checkbox默認樣式

這篇文章主要介紹了antd vue怎么調整checkbox默認樣式的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇antd vue怎么調整checkbox默認樣式文章都會有所收獲，下面我們一起來看看吧。

antd vue 調整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內添加checkbox踩坑

table是一些管理系統經常需要使用的組件，如果想要在table中同時操作多項，可能需要在前面添加checkbox，今天在項目終于到一個坑，使用的是antd組件庫，但是在按照官網的例子引入時，發現點擊其中某一行的checkbox，會將所有行的checkbox同時選中

在查閱官方文檔后，發現有一個selectedRowKeys屬性，文檔上說selectedRowKeys需要和onChange 進行配合進行配合使用，onChange方法有兩個參數function(selectedRowKeys, selectedRows)，第二個參數表示當前行的數據，第一表示的是數據中的key值，這個就很關鍵，如果你的數據中沒有綁定key這個字段，那么這個參數輸出的就是undefined，所有需要在數據中綁定一個唯一的key值，可以和數據中的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})
}

關于“antd vue怎么調整checkbox默認樣式”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“antd vue怎么調整checkbox默認樣式”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。