vue中 双层list的数据怎么展示?

img

接口获得数据大致是这样,一个list中嵌套一个list,怎么让中间的list也展示在页面中?

img


这个是我随便写的,不对,可以帮忙修正一下吗

你这里值能继承上面的数据吗?像el-table需要加一个插槽

img

img

    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.list" style="width: 100%">
            <el-table-column prop="id" label="ID" width="180">
            </el-table-column>
            <el-table-column prop="name" 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>

双循环,在第一个循环里面去循环里面的数组

双重for循环

估计你得在mycolumn里再搞个mycolumn循环

给你一个双循环的案例

img


代码

<template>
<div>
   <div class="menu" v-for="(item,index) in data" :key="index">
      {{item.name+item.value}}
      <div v-show="item.list" class="submenu" v-for="(subitem,subindex) in item.list" :key="subindex">
         {{subitem.name+subitem.value}}
         <div></div>
      </div>
   </div>
</div>
</template>

<script>
    export default {
        name: "index",
        data: function () {
            return {
               data:[
                  {
                     name:"html",value:"123",
                     list:[
                        {
                           name:"html1",value:"123"
                        },
                        {
                           name:"html2",value:"123"
                        },
                        {
                           name:"html3",value:"123"
                        },
                     ]
                  },
                  {
                     name:"html",value:"123"
                  },
                  {
                     name:"html",value:"123"
                  },

               ]
            }
        },
        methods: {}
    }
</script>

<style lang="scss" scoped>
.menu{
   line-height: 40px;
   background: #1D73F6;
   color: #ffffff;
   text-indent: 20px;
}
.submenu{
   height: 40px;
   background: #E8CB7E;
   color: #ffffff;
   text-indent: 40px;
}

</style>



还有不懂之处可以私我

在第一个循环的标签内些第二个循环,item.values是你第二次要循环的数组吗,是的话第二次就是用(it, index) in item.values 这里要注意第二次循环的项it和index不能和第一次的重名