vue table的行里嵌套表格,子表格数据加载不出来

1、图片描述

2、界面代码

`
    <el-table
        :data="tableData5"
        :row-key="getRowKeys"
        :expand-row-keys="expands"
        style="width: 100%">
  <el-table-column type="expand">
        <el-table class="demo-table-expand"
                prop="tableData3"
                height="300"
                border
                style="width: 100%">
          <el-table-column
                  prop="tableData3.date"
                  label="编号"
                  >
          </el-table-column>
          <el-table-column
                  prop="name"
                  label="房间号"
                  >
          </el-table-column>
          <el-table-column
                  prop="name"
                  label="房型">
          </el-table-column>
          <el-table-column
                  prop="date"
                  label="性别"
                  >
          </el-table-column>
          <el-table-column
                  prop="name"
                  label="总床位"
                  >
          </el-table-column>
          <el-table-column
                  prop="address"
                  label="状态">
          </el-table-column>
          <el-table-column
                  prop="date"
                  label="备注"
                  >
          </el-table-column>
          <el-table-column align="center" label="操作" width="150">
            <template scope="scope">
              <el-button  size="small" type="success" @click="handleUpdate(scope.row)">修改
              </el-button>
              <el-button  size="small" type="danger" @click="sure">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
  </el-table-column>
  <el-table-column align="center"
          label="楼宇"
          prop="names">
  </el-table-column>
  <el-table-column align="center"
          label="描述"
          prop="desc">
  </el-table-column>
  <el-table-column align="center" label="操作" width="150">
    <template scope="scope">
      <el-button  size="small" type="success" @click="handleUpdate(scope.row)">修改
      </el-button>
      <el-button  size="small" type="danger" @click="sure">删除
      </el-button>
    </template>
  </el-table-column>
</el-table>`

数据来源:
`

tableData5: [{
              names: 'S1-科技楼',
              desc: '公司楼',
              tableData3: [{
                  date: '2016-05-03',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1518 弄'
              }]
          },
          {
              names: 'S2-科技楼',
              desc: '上课喽',
              tableData3: [{
                  date: '2016-05-03',
                  name: '张小虎',
                  address: '上海市普陀区金沙江路 32421弄'
              }]
          }],`

3、外层表格的每一行可以展开一个子表格,子表格的数据渲染不出来

阅读 19.4k
1 个回答

clipboard.png

  <el-table
      :data="tableData5"
      :row-key="getRowKeys"
      :expand-row-keys="expands"
      style="width: 100%">
      <el-table-column type="expand">
        <template scope="scope">
        <el-table class="demo-table-expand"
                  :data="scope.row.tableData3"

                    border
                    style="width: 100%">
            <el-table-column
              prop="tableData3.date"
              label="编号"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="房间号"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="房型">
            </el-table-column>
            <el-table-column
              prop="date"
              label="性别"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="总床位"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="状态">
            </el-table-column>
            <el-table-column
              prop="date"
              label="备注"
            >
            </el-table-column>
            <el-table-column align="center" label="操作" width="150">
              <template scope="scope">
                <el-button size="small" type="success" @click="handleUpdate(scope.row)">修改
                </el-button>
                <el-button size="small" type="danger" @click="sure">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="楼宇"
                       prop="names">
      </el-table-column>
      <el-table-column align="center"
                       label="描述"
                       prop="desc">
      </el-table-column>
      <el-table-column align="center" label="操作" width="150">
        <template scope="scope">
          <el-button size="small" type="success" @click="handleUpdate(scope.row)">修改
          </el-button>
          <el-button size="small" type="danger" @click="sure">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题