需求場景：點擊【新增】按鈕可以在分頁彈窗中跨頁多選選擇數(shù)據(jù)后添加到頁面中，再次點擊【新增】，已經(jīng)選擇過的數(shù)據(jù)則置灰不讓重復(fù)選擇。

選擇后，置灰

點擊【確定】數(shù)據(jù)添加到頁面中，可再次點擊【新增】進行添加數(shù)據(jù)

解決步驟1：table組件的寫法

 <a-table:row-key="(r) => r.id":columns="columns":dataSource="dataSource":pagination="pagination"@change="changeTable":row-selection="rowSelection":rowClassName="rowClassNameFn"bordered:scroll="{ y: 400 }"></a-table>

1.columns：table表格配置的列
2.dataSource：table表格的數(shù)據(jù)源
3.pagination：分頁參數(shù)
4.changeTable：切換頁碼/頁容量
5.rowSelection：計算屬性，用于實時獲取選擇情況
6.rowClassNameFn：行樣式

從rowSelection開始說吧，前面的只要是有點經(jīng)驗的，都會知道了。。

 computed: {rowSelection() {return {selectedRowKeys: this.selectedRowKeys,selectedRows: this.selectedRows,onChange: (selectedRowKeys, selectedRows) => {this.selectedRowKeys = selectedRowKeys;},onSelect: (record, selected, row) => {if (selected) {this.selectedRows.push(record);} else {let selectedRows = [...this.selectedRows];this.selectedRows = selectedRows.filter((item) => item.id != record.id);}},onSelectAll: (selected, selectedRows, changeRows) => {if (selected) {this.selectedRows = this.selectedRows.concat(changeRows);} else {let selectedRows = [...changeRows];this.selectedRows = selectedRows.filter((item) => this.selectedRowKeys.indexOf(item.id) == -1);}},getCheckboxProps: (record) => ({props: {disabled:this.areadyRows &&this.areadyRows.filter((item) => (item.controlCardNo || item.cardNo) == record.cardNo).length > 0,},}),};},},

上面的selectedRows和selectedRowKeys就是對應(yīng)的行id集合以及行集合數(shù)組，areadyRows就是已選擇的數(shù)據(jù)，這個跟selectedRows不一樣的問題在于是否跨頁。

行樣式：

//行高亮
rowClassNameFn(record) {if (this.areadyRows &&this.areadyRows.filter((item) => (item.controlCardNo || item.cardNo) == record.cardNo).length > 0) {return 'disabledCls';}
},

設(shè)置樣式：

<style lang="less" scoped>
/deep/.ant-table-tbody > tr.disabledCls {background: #f7f7f7 !important;
}
/deep/.ant-table-tbody > tr.disabledCls:hover > td {background: #f7f7f7 !important;
}
</style>

完成！！！多多積累，多多收獲！！！