如何实现多级表头下，根据不同字段实现对应属性的渲染？-灵析社区
sssssjkl根据多级表头渲染表格数据———— 这是数据源，依据shift字段值区分白夜班数据； [ { "station_no": "OP10激光打码", "shift": "白班", "total_input": "101", "pass_count": "100", "ng_count": "1", "pass_rate": 99.01, "work_time": "2023-12-24" }, { "station_no": "OP10激光打码", "shift": "夜班", "total_input": "102", "pass_count": "100", "ng_count": "2", "pass_rate": 98.04, "work_time": "2023-12-24" }, { "station_no": "OP20CV1组装", "shift": "白班", "total_input": "130", "pass_count": "130", "ng_count": "0", "pass_rate": 100, "work_time": "2023-12-25" }, { "station_no": "OP20CV1组装", "shift": "夜班", "total_input": "135", "pass_count": "135", "ng_count": "0", "pass_rate": 100, "work_time": "2023-12-25" }, { "station_no": "OP30CV23组装", "shift": "白班", "total_input": "155", "pass_count": "150", "ng_count": "5", "pass_rate": 96.77, "work_time": "2023-12-26" }, { "station_no": "OP30CV23组装", "shift": "夜班", "total_input": "121", "pass_count": "120", "ng_count": "1", "pass_rate": 99.17, "work_time": "2023-12-26" }, { "station_no": "OP60PT组装", "shift": "白班", "total_input": "82", "pass_count": "80", "ng_count": "2", "pass_rate": 97.56, "work_time": "2023-12-27" }, { "station_no": "OP60PT组装", "shift": "夜班", "total_input": "2033", "pass_count": "2000", "ng_count": "33", "pass_rate": 98.38, "work_time": "2023-12-27" } ] 这是数据结构： tableTitle: [ { prop: 'station_no', label: '工站' }, { label: '白班', children: [ { label: '总投入', prop: 'total_input' }, { label: '合格数', prop: 'pass_rate' }, { label: '不良数', prop: 'ng_count' }, { label: '通过率', prop: 'pass_rate' } ] }, { label: '夜班', children: [ { label: '总投入', prop: 'total_input' }, { label: '合格数', prop: 'pass_rate' }, { label: '不良数', prop: 'ng_count' }, { label: '通过率', prop: 'pass_rate' } ] 模板结构: 这是渲染后的表头：  怎么实现根据shift这个字段值，给白班和夜班分别渲染对应的数据？ 查看文档，只有多级渲染。 我自己的一个方案：获取数据后，额外操作数据源做一个区分处理（根据shift值），然后修改不同班别下的属性（白班对应列表头属性改为day_total_input，以此类推），在渲染部分外加一个判断。
577739990"图片.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241013/090e368022fdcaaabbb59fa904cdaa3a.png)
因为没有TableData的数据，只有一个表头，所以没办法给出很完善的回答，简单来说就是如果按照这样的数据结构给出来的一个Demo
var dataSource = [
{
station_no: "工站A",
shift: "白班",
total_input: "总投入",
pass_count: "合格数",
ng_count: "不良数",
pass_rate: "通过率",
work_time: "工作时间"
},
{
station_no: "工站A",
shift: "夜班",
total_input: "总投入",
pass_count: "合格数",
ng_count: "不良数",
pass_rate: "通过率",
work_time: "工作时间"
},
{
station_no: "工站B",
shift: "白班",
total_input: "总投入",
pass_count: "合格数",
ng_count: "不良数",
pass_rate: "通过率",
work_time: "工作时间"
},
{
station_no: "工站B",
shift: "夜班",
total_input: "总投入",
pass_count: "合格数",
ng_count: "不良数",
pass_rate: "通过率",
work_time: "工作时间"
}
]
主要就是处理一下你的tableData数据，然后简单的拼接 "prop" 属性就好了，比如说 👇
const tableTitle = [
{
prop: 'station_no',
label: '工站'
},
{
label: '白班',
prop: "白班",
children: [
{
label: '总投入',
prop: 'total_input'
},
{
label: '合格数',
prop: 'pass_rate'
},
{
label: '不良数',
prop: 'ng_count'
},
{
label: '通过率',
prop: 'pass_rate'
}
]
},
{
label: '夜班',
prop: "夜班",
children: [
{
label: '总投入',
prop: 'total_input'
},
{
label: '合格数',
prop: 'pass_rate'
},
{
label: '不良数',
prop: 'ng_count'
},
{
label: '通过率',
prop: 'pass_rate'
}
]
}
]
const dataSource = [
{
station_no: "工站A",
shift: "白班",
total_input: "白班-总投入",
pass_count: "白班-合格数",
ng_count: "白班-不良数",
pass_rate: "白班-通过率",
work_time: "白班-工作时间"
},
{
station_no: "工站A",
shift: "夜班",
total_input: "夜班-总投入",
pass_count: "夜班-合格数",
ng_count: "夜班-不良数",
pass_rate: "夜班-通过率",
work_time: "夜班-工作时间"
},
{
station_no: "工站B",
shift: "白班",
total_input: "白班-总投入",
pass_count: "白班-合格数",
ng_count: "白班-不良数",
pass_rate: "白班-通过率",
work_time: "白班-工作时间"
},
{
station_no: "工站B",
shift: "夜班",
total_input: "夜班-总投入",
pass_count: "夜班-合格数",
ng_count: "夜班-不良数",
pass_rate: "夜班-通过率",
work_time: "夜班-工作时间"
}
]
const tableData = dataSource.reduce((total, current) => {
const addedData = total.find(d => d.station_no === current.station_no)
if (addedData) {
addedData[current.shift] = current
return total
} else {
return [ ...total, { ...current, [current.shift]: current }]
}
}, [])
🌰 这里是Vue3 + ElePlus 的
"在线DEMO" (https://link.segmentfault.com/?enc=OgyJEpMaTGlVbKvzxFfinw%3D%3D.zbi9o7VJB%2FAlz2tTdi%2FdymQLLfO50j7Kj9yi3EQuSh%2F6%2BfPTpq4XfnMtBuRUzvUG2DIuAzYAKQ4w4FAhmT5zl0hcg2diPBks8qqxx8hVRdRIg21t9jC8j9kqYytTowJRLogau%2BH5tVNB%2BDR4f3nI%2FxAmfTc3PJHWt4N6%2FtQTk4EzQGyhtLTrizd7lpQmQlobqA3bVX5LbPgMicqxc1kPoHcl6iNqGZ%2Bvii1lxJBaMXttVuey5MLmVCM8FrheFnZjcrNnlLpahGhzZ3icV2%2BSm52HBAZ%2F76ngEBJlN9cPw5vK3%2FYTN%2F0xcMFdPKYV08oQmZS9EZq34am5m7LkP3CDAohw2NuBgcHfYssjgV8hMhmoikbvc2Wy43FlXxZAkQxjtLPMD1utcIkz5aAzTzCVkpyrHAz8Ekb02KfeguKO4HeGQzK%2BrOy2TGMJUNKWf9GxYaJoyGDjKrapkvdeJ5z4uJRdjOtzOoWvwgOmfjLgDcPeLbODLIKePWmBSwbv%2BGCn4dxfdkvJqLVXAqnCZ3ugFxz%2FX%2B0%2FGhFdLVvDiOzrnBzpreASVg7BsIC%2F59E0r0tuTt1e0FDUY%2BjNP0w8Rx%2FNWPNDyVt0pfpWFooJYe%2BqDNjBtGhM4mRnWbEuRoIbR2OaD0mXN90oGZCV1X%2FoNQj%2F9a7yrNl%2F4a1DXRMY8TXRV%2B4ElgkwCl2PPumX%2F7H%2BynEFyKvZOMEjiAqYENI6W%2BI%2FQT9oWGdBxK50OaYmzc11AEh%2B5mcppaC4WuYV4%2BJqSO47mwKlgBhg2kinnPPIN0xhAni9wtSnbahQ4AX7JewamSZnfPW0a0dV86rjS1XQkVWMGc7YOdCGp%2B6gEsMOFhn7s1%2Fax79O9km3BI8r5tIrs1OwTYmAac5bNCycnMxSeYG5iv8eiKDiaS1HQCJ4QJxiscooK5WbeiVMKAF8jgLY4cPdCNqGwmVxVvCxO2KKPEMfy9pWNZrfH7odvaznPUMw%2BAVKpIGFPMJHRtA421RY%2FHUZbfa0kWRcvGoGYW6adEhxCNwhNxOrH8Db3IU%2F%2BF3eGz1CeacF482p0DuthQkPVxSFBGLaQkx1NhL%2Bn3Ov2ySs5GJVLPBsXj6OGJBRXLOmR48qVBM3%2BIk783r921m3%2BdlTkbsybaZP3Fvpeyh6%2FW5WxVW3MKpK%2BmyOmNvn31q0%2FViqnURwn4SZbYL9gXJzbPmp%2BsCHX3mcSKq1Knw6lksacjsmShTsNEJ56U0YQQ74YT%2BSBaUub3anXFCDPXLX5xvBZZuf7w1retZCjHFUEBgooAfG072Xs2YLmhvcXXlYtBifbo65p%2BBxmVg94kxLSFKWE9Xij8fywlrdMT11yAROtofKprsOX2calCjVdM7xjNJ52AAJFwc2fqMlVtBjytYq%2B7hGiIH8nPz3S8gLMFGWhYkhg6cfsBi7I7qy53771JJQ1jb0VHw%2B1kH3Ci2nUQzUmGbTDwjp3v4TYRRlz2GAMgw%2Bb5vMxliaKSz%2BtJ7tdM2PdOVlxWdJH2fl1LamaavCSByzG%2BXPKG8fLajuzleW5J352ocTJURyyVlbCJ9NlVgQFFQK6UDPmzH9NXISE8n1OgBq1eolUeT4NMtuvMaR8R3G3EDx4ZpVUnqyxR1v8MMJC4ggsjNikfGV6cKtbryPg3QxfKSVmBeAn71v%2Bdbbj7aak7gz5PmexppDcERkeukhdXZzX9TMuATVQv%2B0WzZZULqempTNngdyO0tnd8SNf%2BTXwmPYqRDHfQ4UVxtGcX1%2BKCpQeztsc8TkBCVry1jTPWeEoVB1LCmAwDk7yqWCWxP1z2CccWEYKlLPrqWQYJySgNVfJI%2FksCiWm8G9dyyU3wwVufbcv4LPVS4dpVUrrIDpqlDFf5A9eXgkiHAd9iRwrT3emnIoF1EyeiLXyRZ61zAkwcLMtENTUQy9CJH0GMC9U7YhrWL2h0WYG3AjjJa2BLOtMcfvIWBeg6YR1KVuiUrqlrhZUh0DNIa7th%2Fzst2dnKqh3sU3EgiB7qycA%2BNPgHdsZzmmfWlI%2BK2fTR9ESi40UO5nYtDpKSLzIz1NWLHqtsFWLO3%2BpJAFaodI%2BSGpdLh3zFYaWXf48fk0dtuBM8G7vGoYNGyjpVp%2B5DnbFSJgDepmxvnlK1RjBVY4RYUuYTQFqAI%2FjrKbhJcO2wzl4BKA9mqimMwasVBOgxVC4EytTdSO%2Fpdd%2BDmvPacpR8Mx5ujKcO7WSY1%2FiPpFdoDWfQzLiRfs2bdx1dtgoYHlQRz%2BJYxSV7Rr%2BQkdVBXKtohxr7hsR%2BAUuCjkzknIekqAdyFr6y3RBmcUrFRSvQJyZ9YbjpaVtoIfZNt2%2BGDNlWQq86KJ8%2F8mkpX7sFVRMqhES43D8owwf979S2IiJEqg19tY8aALu5j2MZYh6nEqI%2FZK9rFPXqkC0v5%2Ff5tYSdBixZyhj30Uq08QIyUSTw2n%2BpIG%2BWbxTEDMVNwpEWSjN7UISBoTHV8rG1LteS46Zi6bFOmULiOaaaF88FOhG0Osbeex5YpooJBkAjRVjk4f5rT40hWknOuq3bUNcgFm6kvnfmfuL687Ze0p5TA3zUoTATAawqtOkI0RckGnnbehx1S2l7VEMDB06AeHLmrucCbgqQbcIelJIxy0qalVB8fF%2BDvesGYSh7RBa37oGRejnz4OG45Lhb47eHGHeGh2aRdx0L37PEdVtbGK2ZLA9xqZDzuIYuhT54UWw1KLi188G2%2Faa03bcwzQswyGSmNDJJYVIeR%2Fi5tyBBPkHbyRcXDAilUj3j%2Ff2jNguM%2B98Ds7BH9KFQf78DfF4aVV7SreIgv1eQreYEGumUHS0rYpdpp6Q0R4Nm89JsV4NMzWPyuNS5hgTJKJyTbK6h2xvpIaqJptPxEAdc8SPm%2FAoOOgkul97A8oYztV0sJHM5EH05F3dywxiurJbe9YYylyRauO%2FYdG7lYQ3CTC9Ql41c9XU4qNvzGxQv5O4SNOSH4Tqn7OGrUZ8TpbJWJgABcPyfjo4PUpiDsFjFz%2FZA4bfi4LdDq9HBa9Zb3pQrjDOo9hukFEb9ZFyb7LavHarOZ71755HRG1T1eMdjiTfEZyyIKOGteuV4l%2B4yPBV8Leej419yfYjZqzpSZIblvibGCWu5eplS0BpRR%2FbNAczDKIJrT3di2WlORIDEgWkSpGg9ZWe5u9ETwwqnYOjNzhqo%2FZtgG2gHiboinwGoMXfnbyi37O%2F8hH1dMIiYPCbWz%2BeJeQBSKG2AVMEfbRWVZQIQ7ZgbVHTU6nr%2BaIgeVBq%2FyJy1xax8CHRwA4%2BfiheZCM48U3L5pLx9kThD%2FN0%2BOG591UnvSbRMFeozM8qy%2FNO4ho5D46qisxgTmggE8RdsoJvQI6S8BHvHf4twoYvfcaVug7%2Fg134KQyFA2HrcsD%2FA4h5IbVShBaA15zyJkJANOYWT5Lyhdf2KVvVxewFq8uqPOO5u6asFs3huiR5Row3YcwR%2Fniga3qPIuZlaaAilTAJn5Og63LLVjQ%2BOnhb5FZjbaAX3PCOfg8Icx1uTmk0jR8%2Fgmt%2FVisscbIzISF2AnDw1rhpdQQOZ7zKO0Ezmz1lSyx6RseJWN6VIP%2F1H87hRquv3U96zFdIvJc9PkV1h77qm3a%2FYdPgO9KiDgSkCdLA%2FAD%2BVzD5a19BuvbP13Ed83Udg7GK8peakjkOVvUfi7nMTaWWbeUb%2F87AZ3VCOG6IzShnQhTjM0854XlXrN2x%2F7A2QfkQzwaZayd8FG9BWDRp5zNgAhDAF9X%2BopEhE2psLVykr6tHbILGLQsW4UMRmpO2PDiQBnDq3BeJgmOQzzO9ef2fv6ad28rUx2J6%2Fxy99XKPCzf2L4bDvdCNL0hp9aOkEwbaHZL2Ft5PXUX8pIQJEz5EhkLek5EY5T0piMhDyIup5GYlyxj11OYaHYlInFiRt6ch5JQefutntwPFP6cQ21ZpRF3raqklH6ByR4xH0d9pZjD2o0md7MLniF8r1vOwTD6Rx7UvAAzd57pZqxz%2FNtCrQQRDGfXV0GePndy9PgAERSz8e4eKXsumOfV5KkCoYzyY0b1B9a8xpkEKquKzQcbM3dZ0spn3D2T%2BiGRGLxyfrRIytPjD5%2FTTHzAEY1jw1utr02wIcuyzAT3jIoGLyWMVctrPo%2F1tKIgpZLXuJpRTcPoQwhmpz4FxmsF%2FWcWfyCngwdRgCKxH8GvWS9prAqsL4sOhrQNGoz23tBYZ%2BmId3Et8vpGBsgYkLgVqjigYBGrH8%2FA2LTwTDKBDA3of4smRMXzABdBGZOBnMXAI5pJ4xQ2EodZjzI07meB0nqWh9byjcpONhH4pio7TQ4QHrVOaXngN1N7yg0qQXWL9w14XA8GbpvH4%2Br3lYgcgtezvaoH8YGO%2Bb%2FssT27i0T%2BlYceV7w2qISDoQhnxVZ77qmHFaGABAQo7wsyZl6h7DYjc8iA%2Bbxo7NRAmDiq2FsRr%2FdnKh6QBMH6F0JrA7MxtAPCoWvICiDLmV6OE9GhjZXzcHP5prElykg8XaI4iUxgG7bJUz7KknIDjotiA8P7pO9qUmiLcB6YLcaSgbud9RxbnVlgygWfRFdZ9sGn4aD%2BjZK4fhlV6Ukw44V7Oe8ywsv8b7vxIP%2BncCqV3joE1hwoj%2BDNlAadLlmWCnilShWAJ60OQBREgido6h%2FJM0lGkmjW4b5b%2FEi9V89Ek2YA5Fpjrq67VV38FcMTsM82iIIeKkzPupGvwY8f03G6aK0Y4cHd09eoFIND8kWZv8%2F3pDsDRGYsLyOfxwoOpQz4IrEoD5sVPvUiQ05ljqvcYYAGzx1kGcRayOYs%2Fbu88FKyAGPE84Uo8erZVMK4axFtTJjpdLeUZutBz496Q0nrjqW3amP2V%2Fqy%2FLYua0w7VWVqLFT%2B2XHKdTdk53SwRbRqN01JavI7W6%2BOiNe5ZkSJ0B%2FoeIH7ivRSWDui7DSmA2DtPTMoFCd5Mki%2FXl%2FiawBlrEJNHHbO8Awsu%2BwXa%2FkD8ofy7YazXc5mFw1MJl1hYyapZyAeuTw%2FECyBNu7Jx7NXJeWahigJIagsdB3DicvYWEb3zQmF8fV0AlI%2BqfXhu1AOM720%2FnY%2FdWa6kJu5EXVw%2ByrENgerdlRYhjlXKOjdmXmDdf3I4aUp%2BH3foqlM74X94t5231y4k7IoJULA0iu7IvOeEpBTmFUUfQclTgBgBsGXVYiiNwQlmYdGRfN2bV9zhcJ78YB7jiAeV2DBsNmYg6Z7yzCMxJd39il%2B15CB%2BdnVEFtqOe0q6fA2xuglAX4OwNuzUTcqTefT%2BXzz%2B61sWTfdEQ4qvqkZ9hohy84XEQa7vEAfDVJ67bKoEPcBQutNoYo7DG8BwUObT%2B0%2B3LyZk346KfZJOPuWB%2F34EtdCQMpyvqLSOn9AWLjY2cSYh%2F0SrsCa7FoK73bm2x2kwkK2gCwQfeVDQX3WsEHFzFTk1OXAKIU%2BPX0XVyQq2LcSeuDr0qjjxxA21TjJVE4JdKQH%2F7jQRnwYXg8vWugCZSVVjuSGMlzGHc2Vy8Ybotjr5I2V5ZxYmwLDZcEK6Dmgih10oo22v%2Fqu7XFj3KSGAMwiCZxhrQhSo2XzfWbAnQycYloBOmShzoJ4sCP22gRbusd5ut2Fk0zJscGQOTY%2F%2Ft010jA6uhjEwqoGSCzNbFuPKvOCVVz%2B9Tfj37YbNjksR9ylCWnv1XDuRj63CX74mXBxKN36enPTY8Xk7lzu%2FzJ7s1zrgoBo2mQ%2BIHQciHnzrQEK%2FPTKUUKNbjoH1kMnGQ39JdKeq6TTcAeEguMgZoFbxm4icOR%2FZLNlaPoX4OlgHo1vvmcJkzyVgkIjaX%2B3YhjAeDrgv99TdhxQmUOZYHzJpkTZjB0RYJpS82y4mzA%2Bc2bqFO3JSCoS0kiWq6h%2FItyvHzSIlFIa94mvDjAsjSQEQPS8GIwjD80jofTGotdm7jMPlN4azGGh00I2Q%2FuDI6LkYo5hJqKr7IRsIJMW9cClHAyfbVkZDeyRt7nZkvolrNyxu3BPoPaKpA%2FD853t21T0tz43Onbuzj0us0fgNHCmq4msiw48Hbr8I%2FAH290DTOB9bdjPSicSbGt2O7FQSboZsEtPu0REBlfCwlAVgoXm9HgCKGbZovFJYCNL)