1、先写模板,注意:rowSelection<template><a-table :rowSelection="rowSelection" :columns="columns" :dataSource="data" /></template>
2、照搬官方apirowSelection #选择功能的配置。data() { return { selectedRowKeys:[]}},艘早祓胂computed: { rowSelection() { const { selectedRowKeys } = this; return { selectedRowKeys, onChange: this.onSelectChange, hideDefaultSelections: true, onSelect: this.onSelect,//触发级联的方法 }; }},
3、别眨眼,级联方法已就位,锟侯希哇处理层级数据,理所当然想到了递归methods: { onSelectChange(selectedRowKeys) { consol髫潋啜缅e.log('selectedRowKeys changed: ', selectedRowKeys); this.selectedRowKeys = selectedRowKeys; }, onSelect(record, selected){//每个复选框点击都会触发 const selectrows=[record.key]; if(record.hasOwnProperty('children')){ const generator = (record) => { //这里做一个递归查找 record.forEach(item => { selectrows.push(item.key) if (item.children && item.children.length > 0) { generator(item.children,) } }) } generator(record.children) } const newselect=this.selectedRowKeys.filter(item=>!selectrows.includes(item)) //选中和取消选中的级联 selected ? (this.selectedRowKeys = [...this.selectedRowKeys,...selectrows]):(this.selectedRowKeys = newselect) } }至此树表格级联选择的功能已完成,关键代码就是onSelect,so Easy