ant design作为一套企业级UI框架，从诞生至今经历多次迭代，有react、vue、angular三种主流框架的版本，在组件封装方面已经很全面了，几乎涵盖了前端所有的UI场景，前端top也在不断提升，但仍然存在一些不足。

近期，在用antdesign做项目时用到了树形表格,要求树表格可以级联选择，满心欢喜的去照搬官方文档，╯^oo^{╰我擦^oo},

image.png

• 先写模板，注意：rowSelection

<template>
    <a-table :rowSelection="rowSelection" :columns="columns" :dataSource="data" />
</template>

• 照搬官方api

rowSelection #

选择功能的配置。

  data() {
     return {
        selectedRowKeys:[]
     }
    },
    computed: {
        rowSelection() {
        const { selectedRowKeys } = this;
        return {
          selectedRowKeys,
          onChange: this.onSelectChange,
          hideDefaultSelections: true,
          onSelect: this.onSelect,//触发级联的方法
        };
      }
    },

• 别眨眼，级联方法已就位，处理层级数据，理所当然想到了递归

 methods: {
        onSelectChange(selectedRowKeys) {
            console.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

完整示例

<template>
    <a-table :rowSelection="rowSelection" :columns="columns" :dataSource="data" />
</template>
<script>
  export default {
    data() {
     return {
        selectedRowKeys:[]
     }
    },
    computed: {
        rowSelection() {
        const { selectedRowKeys } = this;
        return {
          selectedRowKeys,
          onChange: this.onSelectChange,
          hideDefaultSelections: true,
          onSelect: this.onSelect,
        };
      }
    },
    methods: {
        onSelectChange(selectedRowKeys) {
            console.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)
        }
    }
  };
</script>