element table表格嵌套表格

最终效果图
json数据
<div>
     <el-table 
        :data="projectList" 
         border 
        :show-header="false"
      >
        <el-table-column width="100px">
            <template slot-scope="scope">
               <div>{{scope.row.ItemTypeName}}</div>
            </template>
         </el-table-column>

         <el-table-column width="400px">
            <template slot-scope="scope">
             <!--第一种方法-->
             <!--<div v-for="(item,index) in scope.row.ViewItemLists">-->
                 <!--<div>{{item.item_name}}</div>-->
                 <!--<div>-->
                   <!--<el-button>原价10</el-button>-->
                   <!--<el-button>折扣价0</el-button>-->
                 <!--</div>-->
             <!--</div>-->

     
           <!--第二种方法-->
           <tr v-for="item in scope.row.ViewItemLists" style="width: 100%">
              <!--<template slot-scope="scope">-->
               <td width="70%">{{item.item_name}}</td>
               <td width="15%">原价10</td>
               <td width="15%">原价10</td>
                <!--<div style="border: #8c939d solid 1px">{{item.item_name}}</div>-->
                <!--<div style="border: #8c939d solid 1px">-->
                  <!--<el-button>原价10</el-button>-->
                  <!--<el-button>折扣价0</el-button>-->
                <!--</div>-->
              <!--</template>-->
            </tr>

          </template>
       </el-table-column>
    </el-table>
</div>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容