饿了么二级表头实战

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>

　　

转载于:https://www.cnblogs.com/zhang134you/p/11508558.html