element表格展开行

最新推荐文章于 2024-08-13 20:33:31 发布

米粥৫

最新推荐文章于 2024-08-13 20:33:31 发布

阅读量892

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_60599550/article/details/121219037

版权

想做一个表格，点击可以展开看详情，查了element组件发现可以用type="expand"，效果如下

但是我希望表格展开还是表格，因此改了一下所给的示例代码

    <el-table
        :data="orderInfo"
        border
        fixed
        fit
        style="width:95.2%;margin:0px auto;" size="medium" >
        
        // 以下为展开行代码
        <el-table-column type="expand" prop="taskinfo_set">  //prop属性对应对象中的键名taskinfo_set
          <template slot-scope="scope">
            <el-table
              :data="scope.row.taskinfo_set"
              style="width: 100%">
              <el-table-column
                prop="id"
                label="id"
                width="60">
              </el-table-column>
              //以下为表格title
              ......
            </el-table>
          </template>
        </el-table-column>
        
        //以下为非展开行代码
        <el-table-column
          prop="id"
          label="id"
          min-width="20">
        </el-table-column>
        ......
    </el-table>

源数据如下：

[
  {
    "id": 1,
    "taskinfo_set": [
      {
        "id": 1,
        "order_id": "11111"，
      },
      {
        "id": 2,
        "order_id": "11111"，
      },
  },
  {
    "id": 2,
    "taskinfo_set": [
      {
        "id": 1,
        "order_id": "11111"，
      },
      {
        "id": 2,
        "order_id": "11111"，
      },
  }
]

页面表格显示如下：