您好,登錄后才能下訂單哦!
ant design vue 表格table 默認(rèn)勾選幾項(xiàng)的實(shí)現(xiàn)?相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策,為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法,通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
在 ant design vue 中,表格的第一列是聯(lián)動(dòng)的選擇框
截一張官方文檔圖,圖示最后一排就是禁用狀態(tài)
點(diǎn)擊 checkbox 會(huì)觸發(fā)onChange , 從而得到selectedRowKeys,selectedRowKeys就是選中的 key 數(shù)組。
onChange: (selectedRowKeys, selectedRows) => { console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); },
默認(rèn)禁用disable 某項(xiàng)時(shí),官方文檔給出了例子:
rowSelection() { const { selectedRowKeys } = this; return { onChange: (selectedRowKeys, selectedRows) => { console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); }, getCheckboxProps: record => ({ props: { disabled: record.name === 'Disabled User', // Column configuration not to be checked name: record.name, } }), } }
主要是getCheckboxProps 里面的disabled 屬性控制的。
默認(rèn)選中某項(xiàng)時(shí),需要 getCheckboxProps 里面的defaultChecked 屬性控制:
業(yè)務(wù)場(chǎng)景:勾選了幾項(xiàng)保存之后,下次進(jìn)來(lái)編輯還是需要展示之前勾選的項(xiàng),這時(shí)候就用到了默認(rèn)勾選的屬性
之前只貼了核心邏輯,好多人好像沒(méi)看懂,我把整體的都貼上來(lái)了。
核心代碼defaultChecked: selectedRowKeys.includes(record.id) 的思路就是所有表格里所有包含已選中項(xiàng)的id,都給他默認(rèn)選中
data () { return { // ... record: '', rowSelection: { selectedRowKeys: [], onChange: this.onSelectChange } }, methods: { handleEdit (record) { //...省略我的業(yè)務(wù)邏輯 if (record) { //...省略我的業(yè)務(wù)邏輯 let selectedRowKeys = (record.roleIdList.length > 0 && record.roleIdList.split(',')) || []; this.rowSelection = { selectedRowKeys: selectedRowKeys, onChange: this.onSelectChange, getCheckboxProps: record => { return { props: { defaultChecked: selectedRowKeys.includes(record.id) } }; } }; } else { this.record = ''; this.rowSelection = { selectedRowKeys: [], onChange: this.onSelectChange } } }, onSelectChange (selectedRowKeys) { // 去重 Array.from(new Set(arr)) this.rowSelection.selectedRowKeys = Array.from(new Set(selectedRowKeys)); } }
ant design vue 版本和 react 版本寫(xiě)法略有不同,disabled 和 defaultChecked 都掛在了props 屬性下。
補(bǔ)充知識(shí):Ant-Design-Pro中Table組件rowSelection方法的一些坑
如下所示:
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
在 <Table/> 組件中有 rowSelection={rowSelection} 方法,可以讓Table的第一列成為聯(lián)動(dòng)的選擇框。
API中說(shuō)到通過(guò) rowSelection.selectedRowKeys 來(lái)控制選中項(xiàng)。比較坑的是,selectedRowKeys 控制的只是dataSource當(dāng)前的順序編號(hào)。
一定要加上rowKey="id"或者rowKey={record => record.id},后來(lái)經(jīng)過(guò)多次調(diào)試發(fā)現(xiàn)很多BUG都跟這個(gè)參數(shù)有關(guān),不然會(huì)導(dǎo)致聯(lián)動(dòng)的選擇框狀態(tài)異常。id可以自定義為dataSource中的某個(gè)值。
看完上述內(nèi)容,你們掌握ant design vue 表格table 默認(rèn)勾選幾項(xiàng)的實(shí)現(xiàn)的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。