1587881986(1).jpg

HTML

            <el-table-column  label="#" align="center" type="expand">
              <template slot-scope="props">
                <el-table :data="props.row.children" align="center" stripe>
                  <el-table-column align="center" v-for="(item,index) in cities" :label="item.label" :key="index" :prop="item.property">
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="协议编号" width="180" align="center">
            </el-table-column>
            <el-table-column prop="name" label="设备类型" width="180" align="center">
            </el-table-column>
            <el-table-column prop="address" label="创建人" align="center">
            </el-table-column>
            <el-table-column prop="address" label="创建时间" align="center">
            </el-table-column>
            <el-table-column prop="address" label="是否已关联设备" align="center">
            </el-table-column>
            <el-table-column prop="address" label="描述" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                <el-button size="mini" @click="handleDelete(scope.$index, scope.row)">导出</el-button>
              </template>
            </el-table-column>
          </el-table>

data return

tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        children: [{
          stationCode: 'stationCode数据',
          stationName: 'stationName数据',
          sta: 'sta数据'
        }, {
          stationCode: 'stationCode数据',
          stationName: 'stationName数据',
          sta: 'sta数据'
        }]
      }],
      cities: [{ 
          label: "电站编号",
          property: "stationCode",
        },
        {
          label: "电站名称",
          property: "stationName",
        }, {
          label: "区号",
          property: "sta",
        },
      ],