Today, a student asked: how to use Element to achieve multilevel, dynamically changing table header table? The expected effects are as follows:
That’s the part marked in red, which is dynamically changing depending on the back end interface.
Go directly to the demo, online preview here:
<template> <div ID ="app"> < EL-table :data="reports.items"> <el-table-column label=" prop="branch" /> <el-table-column v-for="(bank, Index) in reports. Banks ":key="bank" :label="bank" >< el-table-column :prop=" '${index}_0'" label=" amount "></el-table-column> "El - table - column: prop =" ${index} ` _1 ` "label =" number "> < / el - table - column > < / el - table - column > < / el - table > < / div > < / template > <script> export default {data() {return {reports: {banks: [" CCB ", "CMB "], items: [{branch:" Gansu ", "0_0": 50, "0_1": 30, 40, "1 _0" : "1 _1" : 20}, {branch: "lanzhou", "0 _0" : 40, "0 _1" : 30, "1 _0" : 20, "1 _1" : 10}}}; }}; </script>Copy the code