elementUI+vue 组件 表格嵌套

一. 表格嵌套

          代码段：

  <el-table
      :data="tableData5"
      :row-key="getRowKeys"
      :expand-row-keys="expands"
      style="width: 100%">
      <el-table-column type="expand">  //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>

 

数据格式：

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

 

效果图：

//添加数据

this.list.unshift(this.temp);

//删除数据

const index = this.list.indexOf(row); //找到要删除数据在list中的位置 this.list.splice(index, 1); //通过splice 删除数据

//修改数据

const index = this.list.indexOf(row); //找到修改的数据在list中的位置

this.list.splice(index, 1,this.updatedData); //通过splice 替换数据 触发视图更新

 

参考网址：https://juejin.im/post/593121aa0ce4630057f70d35#heading-18

https://segmentfault.com/q/1010000011699125