element表格嵌套表格

最新推荐文章于 2024-08-08 21:52:27 发布

莫天赐

最新推荐文章于 2024-08-08 21:52:27 发布

阅读量2.5k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_54570434/article/details/121199939

版权

这是一个关于如何使用Element-UI的El-Table组件来创建具有可展开子表格的示例。代码展示了如何通过props绑定数据，展示商品ID、名称和描述，同时在每个主行下展开显示对应的门店信息，包括门店名称、类型和地址。

摘要由CSDN通过智能技术生成

在表格内多个可展开的表格

<template>
  <el-table
    :data="tableData"


    style="width: 100%">
    <el-table-column type="expand"  style="left:20px">
      <template slot-scope="props">
  
      <!-- <template > -->
        <el-table
      :data="props.row.children"
      style="width: 100% ;margin-left: 47px">
      <el-table-column
        prop="date"
        label="门店"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="门店类型"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
      </template>
    </el-table-column>
    <el-table-column
      label="商品 ID"
      prop="id">
    </el-table-column>
    <el-table-column
      label="商品名称"
      prop="name">
    </el-table-column>
    <el-table-column
      label="描述"
      prop="desc">
    </el-table-column>
  </el-table>
</template>

<style lang='scss' scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  /deep/.el-table .el-table--fit .el-table--enable-row-hover .el-table--enable-row-transition{
    margin-left: 47px !important
  }
</style>

<script>
  export default {
    data() {
      return {
        tableData: [{
          id: '12987122',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333',
          children: [{
              id: 31,
              date: '门店名称编码1',
              name: 'BC',
              address: '上海市普陀区金沙江路 151119 弄'
            }, {
              id: 32,
              date: '门店名称编码1',
              name: 'Ba',
              address: '上海市普陀区金沙江路 151119 弄'
          }]
        }, {
          id: '12987123',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333',children: [{
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
        }, {
          id: '12987125',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987126',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }]
      }
    }
  }
</script>