vue table 嵌套效果

Posted 2023-03-12

参考技术A <template>

    <div>

<el-table

  :data="parentTable"

  :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"

                height="300"

                border

                style="width: 100%">

        <el-table-column type="expand">

      <template slot-scope="props">

        <el-form label-position="left" inline class="demo-table-expand">

          <el-form-item label="商品名称">

            <span> props.row.name </span>

          </el-form-item>

          <el-form-item label="所属店铺">

            <span> props.row.shop </span>

          </el-form-item>

          <el-form-item label="商品 ID">

            <span> props.row.id </span>

          </el-form-item>

          <el-form-item label="店铺 ID">

            <span> props.row.shopId </span>

          </el-form-item>

          <el-form-item label="商品分类">

            <span> props.row.category </span>

          </el-form-item>

          <el-form-item label="店铺地址">

            <span> props.row.address </span>

          </el-form-item>

          <el-form-item label="商品描述">

            <span> props.row.desc </span>

          </el-form-item>

        </el-form>

      </template>

    </el-table-column>

        <el-table-column label="编号">

          <template scope="props">

            <span>props.row.name</span>

          </template>

        </el-table-column>

        <el-table-column label="房间号">

          <template scope="props">

            <span>props.row.name</span>

          </template>

        </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>

</div>

</template>

<script>

export default

name: 'inline_edit-table_demo',

data()

  return

    tableData5: [

      names: 'S1-科技楼',

      desc: '公司楼',

      tableData3: [

        date: '2016-05-03',

        name: '王小虎',

        address: '上海市普陀区金沙江路 1518 弄'

      ]

    ,

      names: 'S2-科技楼',

      desc: '上课喽',

      tableData3: [

        date: '2016-05-03',

        name: '张小虎',

        address: '上海市普陀区金沙江路 32421弄'

      ]

    ]

 





</script>

效果图：