快捷導(dǎo)航

antd?vue?表格rowSelection選擇框功能的使用方式

更新時間：2022年12月03日 08:47:54 作者：YaaLee_

這篇文章主要介紹了antd?vue?表格rowSelection選擇框功能的使用方式，具有很好的參考價值，希望對大家有所幫助。以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

antd vue 表格rowSelection選擇框功能

html部分：

<a-table
? ? ? ? :columns="columns"
? ? ? ? :data-source="showList"
? ? ? ? :row-selection="rowSelection"
? ? ? ? :rowKey="record=>record.id"
? ? ? />

功能部分：

computed: {
? ? rowSelection () {
? ? ? return {
? ? ? // type: 'radio', // 是否為單選
? ? ? ? selectedRowKeys: this.dataListSelectionKeys,
? ? ? ? onChange: (selectedRowKeys, selectedRows, event) => {
? ? ? ? ??? ?//selectedRowKeys 為你點(diǎn)擊選框時這一頁選中的所有key
? ? ? ? ??? ?//selectedRows 為你點(diǎn)擊選框時這一頁選中的所有數(shù)據(jù)
? ? ? ? },
? ? ? ? onSelect: (record, selected, selectedRows, nativeEvent) => {
? ? ? ? ? //record 點(diǎn)擊某一條的所有數(shù)據(jù)
? ? ? ? ? //selected 點(diǎn)擊的一條是否被選中
? ? ? ? },
? ? ? ? onSelectAll: (selected, selectedRows, changeRows) => {
? ? ? ? ? //selected 點(diǎn)擊全選是否選中
? ? ? ? ? //selectedRows 點(diǎn)擊全選判斷所有的選中數(shù)據(jù)
? ? ? ? ? //changeRows 所有改變選中狀態(tài)的數(shù)據(jù)
? ? ? ? },
? ? ? ? getCheckboxProps: record => ({
? ? ? ? ? props: {
? ? ? ? ? ? // 全部默認(rèn)禁止選中
? ? ? ? ? ? // disabled: true,
? ? ? ? ? ? // 某幾項(xiàng)默認(rèn)禁止選中(R: 當(dāng)state等于1時)
? ? ? ? ? ? // disabled: record.state == 1,
? ? ? ? ? ? // 某幾項(xiàng)默認(rèn)選中(R: 當(dāng)state等于1時)
? ? ? ? ? ? defaultChecked: record.state === 1
? ? ? ? ? }
? ? ? ? })
? ? ? }
? ? }
? }

Antd Table組件rowSelection方法的一些坑

當(dāng)table組件多選時，會將所有的表格數(shù)據(jù)全部選中。

在組件中官網(wǎng)有提供rowSelection方法，可以讓Table的第一列成為聯(lián)動的選擇框以及通過rowSelection.selectedRowKeys來控制選項(xiàng)。

比較坑的是

selectedRowKeys控制的只是dataSource當(dāng)前的序號，必須加上rowKey={record =>record.userId}，如果不加上會導(dǎo)致聯(lián)動的選擇框異常，rowKey的id可以自定義為dataSource中的某個值。

遇到問題：當(dāng)選擇某一行的數(shù)據(jù)事，它會全部選中，而且在onChange事件中的selectRowKeys的值為“[null]”，如下圖所示：

解決代碼如下

 <Table rowSelection={{type:"checkbox",selectedRowKeys:selectedUserKeys,
                            onChange:(selectedKeys,selectedRows) => selectedUserOnChange(selectedKeys,selectedRows)}}
                               columns={slackColumns} dataSource={unApproved} pagination={false} scroll={{y:80}} size="small"  rowKey={record => record.userId}/>

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: