递归表格

Usage

基本用法

基本treetable用法

    <q-tree-table :header="header" :treeData="data.dataTree">
            <!-- <template #header="scope">{{ scope.hKey }}</template> -->
            <!-- scope: {cell, parent, index, headerKey, cIndex}  cell当前单元格数据，parent:父级单元格数据，index行下标, headerKey当前单元格对应的表格头字段, cIndex当前单元格在父单元格children的下标-->
            <template #default="{ headerKey, cell, parent, index }">
                <Input v-model:value="cell.data[key]"></Input>
            </template>
        </q-tree-table>
        
        <script setup>

        import {QTreeTable} from '@quantum-design/vue3-pc-ui';
        import {reactive} from 'vue'
             const header = {
                title1: '标题1',
                title2: '标题2',
                title3: '标题3',
                title7: {
                    title7: '标题7',
                    data: '配置'
                }
            };

            const dataTree = [
                {
                    key: 'title1', // direct_type
                    data: { // 
                    }, 
                    config: { 
                    },
                    title1: '122323',
                    children: [
                        {
                            data: { // 
                            }, 
                            config: { 
                            },
                            key: 'title2', // direct_type
                            children: [{

                                key: 'title3', // direct_type
                                data: {},
                                config: {}, 
                                children: [{
                                    key: 'title7', // direct_type
                                    data: {},
                                    config: {},
                                    sub_key: ['title7', 'data'], // 最后 一层,
                                }]
                            }]
                        }
                    ]
                }
            ];
        </script>