饿了么二级表头实战
1,html
<template> <div> <el-main class="contailer"> <el-table :data="tableData"> <el-table-column prop="systemName" label="systemName"></el-table-column> <el-table-column label="配送信息"> <el-table-column prop="firstCenterName" label="中心名称"></el-table-column> <el-table-column label="地址"> <el-table-column :prop="item.prop" :label="item.title" v-for="(item,index) in headerData"></el-table-column> </el-table-column> </el-table-column> </el-table> </el-main> </div> </template>
2,js
<script> export default { data() { return { tableData: [ { resourceSystemRelId: 1, systemName: "测试系统1", firstCenterName: "一级中心", modifyAccess: true, //隐藏 modifyTimeAccess: true, //置灰 applyTime: "2019-09-11 16:09:01", val1: "待分配/200", val2: "50/50", val3: "0/0", machineDetailList: [ { machinTypeName: "S3", approvalMechineCount: "待分配", applyMechineCount: 200 }, { machinTypeName: "E3", approvalMechineCount: 50, applyMechineCount: 50 }, { machinTypeName: "A3", approvalMechineCount: 0, applyMechineCount: 0 } ] } ], headerData: [ { title: "S3", prop: "val1" }, { title: "S1", prop: "val2" }, { title: "E3", prop: "val3" } ] }; } }; </script>