给定一个结构，如何生成对应的多级表头的表格？-灵析社区

给定一个结构，如何生成对应的多级表头的表格？ const fields = [ { label: "A", prop: "A" sub: [ { label: "A1", prop: "A1" }, { label: "A2", prop: "A2" } ] }, { label: "B", prop: "B", sub: [ { label: "B1", prop: "B1" }, { label: "B2", prop: "B2" } ] } ] 如果给定的是一个固定层次的嵌套结构，我们可以用两层循环完成。但是当嵌套层次不确定的话，应该怎么递归的生成呢？在vue中该怎么实现？ [固定就2层嵌套结构下的实现](https://link.segmentfault.com/?enc=Agj8hhB4cIjvJ%2B2mFQh5bA%3D%3D.7AXdRhynwKEoGjUHq3iQSh56bWE%2FJMdSOENp7MLfyi853efoMRQ3eMuxvcSMj%2FvuZt7L%2F4Sjvhp6mIu24lokDHhym6nRPxg9Tq580vtLtY0W%2BlD1FGPf6lg%2FJp0GQnZbPVsxAEEFCPRT%2B%2BQ0V9gIYwPVbxLv9niHfxtoeiWBFz4A2%2F9b900S6FDCgcZRIoKW14%2FTB843gLRj4pI%2FwNiWcw3lAbj%2F5TLgSUGWAXKWYv8UQJe1nWlm9C1M8Rch8pHVhQfT1mEyNH1Qwr2c65RHNXm%2FIHFzXYGCgLE0D9YCYxfbFuyEfM6g0gW%2BOjGs0nO2LzjtzEOGSYAfjxSH%2F8pyhEbM2skVg%2FjZLk7eQMyeNL3hlFgxiLnJg7NwQClZcVqDBh%2FRJP04SjwcLZOCHsriikS1oqP7ZKzYyy7jWZpH4%2F6MdvLXWp7tThtShsXfsO5aNLzLYIiuso2lOYgCVzpzAmeS5lOIthsgUU3zdtuYD64VscWnYU%2Fl7gdyAVlPDmbaBMFKEWpEbF4p046cEbJCsm4cY8a3j26u64uck3Jt%2BwE4m6n01Zs3d2M6j52KlK9dLho796fF6ZxwLSuFyIjGZ%2BzB4khfLGNO%2FLvmv0ryn%2FCO4imQyZUjEsbRfLHY5gyhiALsMpe0MFSgImEdWUEBhdb3fjurg8ikUishk9cyYDcpRLo1ZPNvzLDEOhq3YhSK8%2FGh%2B03DrhdfHajRndcyeNCWuSi8Fi20KXwSJSScsCWNU%2B%2F8wxhT1SNb63ebCfHv4bepkWGwgP00k1zsMJKmifYSeTF9wajAGiT5cY8LdFqG0xsfkCx0fNxob3GTf1XdtRp4Qi0InYgmHVeuCetNK1zKIs%2FXoagUw3WJk9CQFgk3MdQBbZ6LPFGpCKT3g%2BUvjhys%2F9NW%2BEn9gprCJ8RDeuFbnlsm54ZxOkkTHpdDyhujHjhqyhWx%2FW%2Fopg%2BhekaFOPGV2rb1HCDV60CPxkZJDCa7zn0OhKGuAOZDjIWq%2FIMPUZgcpznj6gNtUJQF5TX74rqgBQPKXgJ8tH%2FK7XCvPkzmdatJIMn6MKjHLyhtZ0Vsml%2FBMZGitWA8kbJbCKWacKzAZXMuucT65ELYgrwNBM9mVckR%2BMjaayMkT6GxmLm966k%2B66vHZzGm7yB305rS1vgsFprJDlxqCEcp1648aN9BQqaatGkZPOuN0reVwKRDfSnw3asc%2FwPSWV9SxKtI3dUZhRCz3I2rmw%2FNG%2F7vO42w8lFSnQmrCzGvCSD2dq6gCuXSoYTJJ491n8r%2Fu2cAZ%2BttsjbRJpaA0OTVPhmQ95QDCC3Z43SKMM4y2ue1XwG5uKPeuvb7P8AqJ9TB%2Bup4J%2BMBd%2FGuLcC4hAZ89ErTR6tpv3ALGq%2B535gVXRktDQteW0LI6PWh8mh7Ra%2Ft2NOuySvYIx01ZbnTbvyWQ6R9FLgDzKXp8Gj9dshq50SgpMEYLcWExB3mNYdgDImHxjKqK4VCHBQfi70FwQ%2BaVVAJ%2BEJ5uPa12KlBE1vrhMJTPwqAAaYQInS3a7yzKBh%2BDE%2FfoVO167bnjDvlCsV%2BLRUQtlwfCzXM%2FptgnILszq2KnRI9BzpJWsuV7ribbDsyo5n%2FaWFD4ha%2BCudB2qCcCnK2OYbmQO4CHyfouJV0VkSWKW7tbw4Kka6wDISSteBlPScLMqA0ugeZv1sOxL2AlG1NQWBCVXZc2oCQsjs7uDACXgoHLqLGqfv66tOJMNuPD4dH1Qg8tldQlnkxZ0x1UXzr2omkc4kdSkDvxFnOiXsI0JIiJ9%2BCBak%2B6R4LvHYCjwv%2FEMTHSoIKD%2B5XAQgXMMTYvrIP5K%2FnMaTut2WDxdAlCGbTSV4qJ6eQoqUQc3UtAYUL5%2FLFtp93ir4BUXyE7ym%2BfHnsUXAwn74A5byHJbM6uHFoNVctckfEzi78pL3pwO4JvqFGBGHmonB54Cn2Zt4SsQ77QLV%2BZxj9qi%2BnNT3r2PIfBufhJqIkhZ0lauyxJCvl97E4bVz3ZcEa2nQTq7YTin2CT0eJHgHOPvhhAfHNPexgXJ%2BbpyQPn0Q0%2FFd7GrBSMvAVdVG84mCMKkJqQfnPiUCdkPOKFN6P0%2FsJz8S6EMoOlf7cBl7F4FS7hA%2BGROSVMAilLrw%2BZRh5Z3QWk1%2BqL4XFgI4MBtn0yWDXkwxJ069mK5eXNoOZKcYDV7k5Es8DXufwG4zQn18QWU%2B0OdeDwuv4fdrZnnMPnrfXdZsKyzkhr0hv3JkbKvNfqPeFgRaT9yVBcZf%2BEJF1ewOTc%2BSbCGFeOeKDd1LWVpaszbCiumQdNCPSBM1sx2swubs3Fwp0KxMQCWNbyUHg3yWRYR8Yfhrb0kNh1SEVX%2Far4F9XxFAfdhS%2ByL6DmCkh0gsyyNCzMzXyRsbl4xM86%2FWHtm%2FQeNXPwUD%2FeRB9hg0cXZoKtEGRPyHaswVBNidN07mil0jlJFqvDTl3XdoRStztyp9Xr%2FU7HgrFVBWzRkpBpa82YiNvmlcrsygzetY68yn8ysXq21%2BqrmNhnf%2BkUuXbv49ku8neraGBVLzbdvVv6x%2F8Rg%2BXYdf7MgS5Y0aKw8w3MJpb3T2nzBYKQhkQOW3BO1gGz9YvFXkWtcntshdgKCV7oovA57C%2F65Xz1GDJcgKhMLL%2BPnG1IceFMdvW2OHZclXSau6XiDmWK9kZ8DVsBbA3oOVk9gEzpQcyV0b1glWYJ83T%2FnmeUGIxUIoBH%2BMt3IcSSDvpfVMHP4v1LCKbZARyefOxE4C1jfzWVjkq%2FiERwdlU%2BbRIX174rn4GHAFDVk6giQtUgu94%2BwkWoUFQja6XLXHpLmGT79e9BJTqW3cSUHufQnDg%2B3Py3hJCV4b12PSlxkqIyQfGvOF2IECEZBS6d6VmmkZfmHh3rWAF6zPdPeGV6NExct4TuZd0WIHd47jC2FL0YL9wp5IhoizKmz4rjrn2W0e%2Bvoknl6FldLhpOXOjD%2Bm9MCyq8aQC8xTSGw%2BWRfhWtzFCbPBTQHUpqfZJesKOjdLoWiGPWzCo8t4AWvayApFJOX%2F19NgcWkqZnZTjwplFZv3jEnTIKoI3znNzfl4B7G3qv8X%2FQrHya2DktqzFskadbMuC3Lyp8HNH0GmK8oIx0DxFgRLWYXW3jPV%2F%2FUgvdrF0c5%2BtKHHvLbtJXjAA) import { ref, version as vueVersion } from 'vue' import { version as epVersion } from 'element-plus' import { ElementPlus } from '@element-plus/icons-vue' const fields = [ { label: "A", prop: "A", sub: [ { label: "A1", prop: "A1" }, { label: "A2", prop: "A2" } ] }, { label: "B", prop: "B", sub: [ { label: "B1", prop: "B1" }, { label: "B2", prop: "B2" } ] } ] const tableData = [ { A1: "peter", "A2": "huan", B1: "tom", B2: "li" }, { A1: "peter", "A2": "huan", B1: "tom", B2: "li" }, { A1: "peter", "A2": "huan", B1: "tom", B2: "li" }, { A1: "peter", "A2": "huan", B1: "tom", B2: "li" }, ]