vue+antDesign實(shí)現(xiàn)樹形數(shù)據(jù)展示及勾選聯(lián)動(dòng)
vue使用antdesign實(shí)現(xiàn)樹形結(jié)構(gòu)表格展示,選中和取消事件不能實(shí)現(xiàn)父子級的聯(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ū)分級別的字段以便于區(qū)分父級還是子級,知道父子級的所屬關(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')
// 將自定義字段 修改為對應(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)選擇。選中第一級時(shí)需要手動(dòng)添一級下的所有第二級
// 選中父級&&父級有子元素
if (record.type === 1 && record.accountList.length > 0) {
// 修改子級的自定義checkFlag值
record.accountList.forEach(item => {
item.checkFlag = record.checkFlag
})
// 判斷是選中還是取消選中
if (record.checkFlag) { // 選中
// 手動(dòng)添加選中店第二級
this.selectedRowKeys.push(record.id) // 一級id存入到選中的key集合中
this.selectedRows.push(record) // 一級id存入到選中的row集合中
// 遍歷選中的一級的子級 子級全部存入到選中的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)取消一級下所有二級的選中狀態(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 { // 操作子級checkbox
// 找到子級所屬父級
let parent = ''
this.marketingList.forEach(item => {
if (item.id === record.childID) {
parent = item
}
})
if (record.checkFlag) { // 選中
// 選中子級 如果子級全部被選中,對應(yīng)父級被選中
let checkArr = []
checkArr = parent.accountList.filter(account => account.checkFlag)
if (checkArr.length === parent.accountList.length) { // 子級全部被選中
// 父級變更為被選中
this.marketingList.forEach(item => {
if (item.id === record.childID) {
item.checkFlag = true
}
})
this.selectedRowKeys.push(parent.id)
this.selectedRows.push(parent)
}
} else {
// 取消任意子級選中狀態(tài) 父級取消被選中
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)
}
})
// 父級變更為取消選中
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)容請搜索腳本之家以前的文章或繼續(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?多級聯(lián)動(dòng)、數(shù)據(jù)回顯方式
- Vue聯(lián)動(dòng)Echarts實(shí)現(xiàn)數(shù)據(jù)大屏展示
- vue watch深度監(jiān)聽對象實(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項(xiàng)目實(shí)現(xiàn)token無感刷新的示例代碼
最近在使用系統(tǒng)的過程中,業(yè)務(wù)人員反饋剛登錄一會(huì)就提示token過期需要重新登錄,所以本文為大家分享一個(gè)無感刷新的實(shí)現(xiàn)代碼,需要的可以參考下2023-07-07
Vue實(shí)現(xiàn)導(dǎo)入Excel功能步驟詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)導(dǎo)入Excel功能,本文分步驟給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-07-07
VUE子組件向父組件傳值詳解(含傳多值及添加額外參數(shù)場景)
這篇文章主要給大家介紹了關(guān)于VUE子組件向父組件傳值(含傳多值及添加額外參數(shù)場景)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09

