vue+antDesign實(shí)現(xiàn)樹形數(shù)據(jù)展示及勾選聯(lián)動(dòng)
vue使用antdesign實(shí)現(xiàn)樹形結(jié)構(gòu)表格展示,選中和取消事件不能實(shí)現(xiàn)父子級(jí)的聯(lián)動(dòng)。

解決:selectedRowKeys: selectedRowKeys,onChange: onSelectChange, onSelect: onSelectRow, onSelectAll: onSelectAll
實(shí)現(xiàn)數(shù)據(jù)交互時(shí)定義方法
<a-table
:rowKey='record => record.accountList && record.accountList.length ? record.id : record.id'
:columns="columns"
:data-source="marketingList"
:row-selection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange, onSelect: onSelectRow, onSelectAll: onSelectAll}"
childrenColumnName = "accountList">
</a-table>
注意:樹形結(jié)構(gòu)數(shù)據(jù)中,要有能區(qū)分級(jí)別的字段以便于區(qū)分父級(jí)還是子級(jí),知道父子級(jí)的所屬關(guān)系
selectedRowKeys: [], // 選中的行的key值
selectedRows: [], // 選中行的row
methods:{
// 表格checkbox選中事件
onSelectChange (selectedRowKeys, selectedRows) {
console.log('selectedRowKeys changed: ', selectedRowKeys, selectedRows)
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
},
// 表格checkAll 操作
onSelectAll (selected, selectedRows, changeRows) {
let newArr = []
console.info(selected, 'onSelectAll')
// 將自定義字段 修改為對(duì)應(yīng)狀態(tài)
if (selected) {
// 遞歸添加自定義字段 checkBox: true (選中), false(未選中)
this.traverseTree(this.marketingList, newArr, true)
} else {
this.traverseTree(this.marketingList, newArr, false)
}
this.marketingList = newArr
},
// 表格單行數(shù)據(jù)被選中事件
onSelectRow: function (record, selected, selectedRows) {
console.info(record, selected, selectedRows, 'selected')
record.checkFlag = !record.checkFlag // 更改選中row的選中狀態(tài)
// antD此版本 注:暫不支持父子數(shù)據(jù)遞歸關(guān)聯(lián)選擇。選中第一級(jí)時(shí)需要手動(dòng)添一級(jí)下的所有第二級(jí)
// 選中父級(jí)&&父級(jí)有子元素
if (record.type === 1 && record.accountList.length > 0) {
// 修改子級(jí)的自定義checkFlag值
record.accountList.forEach(item => {
item.checkFlag = record.checkFlag
})
// 判斷是選中還是取消選中
if (record.checkFlag) { // 選中
// 手動(dòng)添加選中店第二級(jí)
this.selectedRowKeys.push(record.id) // 一級(jí)id存入到選中的key集合中
this.selectedRows.push(record) // 一級(jí)id存入到選中的row集合中
// 遍歷選中的一級(jí)的子級(jí) 子級(jí)全部存入到選中的key集合中、row集合中
record.accountList.map(account => {
this.selectedRowKeys.push(account.id)
// 去重- 關(guān)鍵
this.selectedRowKeys = this.selectedRowKeys.filter((x, index, self) => self.indexOf(x) === index)
})
this.selectedRows = this.selectedRows.concat(record.accountList)
// 去重- 關(guān)鍵
this.selectedRows = this.selectedRows.filter((x, index, self) => self.indexOf(x) === index)
} else { // 取消選中
// 取消本身
this.selectedRowKeys = this.selectedRowKeys.filter(item => item !== record.id)
this.selectedRows = this.selectedRows.filter(item => item.id !== record.id)
// 手動(dòng)取消一級(jí)下所有二級(jí)的選中狀態(tài)
record.accountList.forEach(account => {
this.selectedRowKeys.forEach((selectKey, index) => {
if (account.id === selectKey) {
this.selectedRowKeys.splice(index, 1)
}
})
this.selectedRows.forEach((selectRow, index) => {
if (account.id === selectRow.id) {
this.selectedRows.splice(index, 1)
}
})
})
}
} else { // 操作子級(jí)checkbox
// 找到子級(jí)所屬父級(jí)
let parent = ''
this.marketingList.forEach(item => {
if (item.id === record.childID) {
parent = item
}
})
if (record.checkFlag) { // 選中
// 選中子級(jí) 如果子級(jí)全部被選中,對(duì)應(yīng)父級(jí)被選中
let checkArr = []
checkArr = parent.accountList.filter(account => account.checkFlag)
if (checkArr.length === parent.accountList.length) { // 子級(jí)全部被選中
// 父級(jí)變更為被選中
this.marketingList.forEach(item => {
if (item.id === record.childID) {
item.checkFlag = true
}
})
this.selectedRowKeys.push(parent.id)
this.selectedRows.push(parent)
}
} else {
// 取消任意子級(jí)選中狀態(tài) 父級(jí)取消被選中
this.selectedRowKeys.forEach((selectKey, index) => {
if (parent.id === selectKey) {
this.selectedRowKeys.splice(index, 1)
}
})
this.selectedRows.forEach((selectRow, index) => {
if (parent.id === selectRow.id) {
this.selectedRows.splice(index, 1)
}
})
// 父級(jí)變更為取消選中
this.marketingList.forEach(item => {
if (item.id === record.childID) {
item.checkFlag = false
}
})
}
}
},
}效果圖:

到此這篇關(guān)于vue+antDesign實(shí)現(xiàn)樹形數(shù)據(jù)展示及勾選聯(lián)動(dòng)的文章就介紹到這了,更多相關(guān)vue 樹形數(shù)據(jù)展示及勾選聯(lián)動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue實(shí)現(xiàn)兩個(gè)列表之間的數(shù)據(jù)聯(lián)動(dòng)的代碼示例
- Vue動(dòng)態(tài)數(shù)據(jù)實(shí)現(xiàn)?el-select?多級(jí)聯(lián)動(dòng)、數(shù)據(jù)回顯方式
- Vue聯(lián)動(dòng)Echarts實(shí)現(xiàn)數(shù)據(jù)大屏展示
- vue watch深度監(jiān)聽(tīng)對(duì)象實(shí)現(xiàn)數(shù)據(jù)聯(lián)動(dòng)效果
- vue中循環(huán)表格數(shù)據(jù)出現(xiàn)數(shù)據(jù)聯(lián)動(dòng)現(xiàn)象(示例代碼)
相關(guān)文章
Vue使用lodop實(shí)現(xiàn)打印小結(jié)
這篇文章主要介紹了Vue使用lodop打印小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue elementui異步給dom賦值無(wú)效問(wèn)題
這篇文章主要介紹了vue elementui異步給dom賦值無(wú)效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
el-input設(shè)置后綴顯示單位并阻止?jié)L輪微調(diào)的解決方法
在Element UI或Element Plus中,使用el-input組件時(shí),可以通過(guò)suffix插槽添加單位顯示,如果設(shè)置了type為'number',滾輪滾動(dòng)可能會(huì)導(dǎo)致數(shù)值微調(diào),解決方法是阻止?jié)L輪事件的默認(rèn)行為,并用CSS隱藏掉輸入框的上下箭頭,確保數(shù)值輸入的準(zhǔn)確性,這樣既美觀又提升了用戶體驗(yàn)2024-09-09
axios請(qǐng)求二次封裝之避免重復(fù)發(fā)送請(qǐng)求
在做vue中大型項(xiàng)目的時(shí)候,官方推薦使用axios,但是原生的axios可能對(duì)項(xiàng)目的適配不友好,所以在工程開(kāi)始的來(lái)封裝一下axios,下面這篇文章主要給大家介紹了關(guān)于axios請(qǐng)求二次封裝之避免重復(fù)發(fā)送請(qǐng)求的相關(guān)資料,需要的朋友可以參考下2022-10-10
element根據(jù)輸入動(dòng)態(tài)生成表格的示例代碼
在現(xiàn)代電商系統(tǒng)開(kāi)發(fā)中,后臺(tái)管理界面經(jīng)常需要根據(jù)商品規(guī)格和規(guī)格值動(dòng)態(tài)生成SKU表格,本文通過(guò)element-ui框架,展示了如何在Vue.js的環(huán)境下,利用子組件和動(dòng)態(tài)綁定的方式,實(shí)現(xiàn)SKU表格的增刪改查功能2024-11-11
Vue3+Canvas實(shí)現(xiàn)簡(jiǎn)易的貪吃蛇游戲
貪吃蛇作為一個(gè)經(jīng)典的小游戲,是很多人兒時(shí)的記憶,當(dāng)時(shí)的掌機(jī)、諾基亞手機(jī)里面都有它的身影。本文將用Vue3?Canvas來(lái)復(fù)刻一下這款游戲,感興趣的可以了解一下2022-07-07
基于elementUI使用v-model實(shí)現(xiàn)經(jīng)緯度輸入的vue組件
這篇文章主要介紹了基于elementUI使用v-model實(shí)現(xiàn)經(jīng)緯度輸入的vue組件,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
Vue網(wǎng)頁(yè)html轉(zhuǎn)換PDF(最低兼容ie10)的思路詳解
這篇文章主要介紹了Vue網(wǎng)頁(yè)html轉(zhuǎn)換PDF(最低兼容ie10)的思路詳解,實(shí)現(xiàn)此功能需要引入兩個(gè)插件,需要的朋友可以參考下2017-08-08
Element修改彈窗類組件的層級(jí)的實(shí)現(xiàn)
本文主要介紹了Element修改彈窗類組件的層級(jí)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04

