如图,像这种页面排版我使用的是循环去进行合并单元格,那么数据结构也是分成一级和二级。
这是html页面实现的逻辑,仅供参考,根据自己的业务需求进行修改。
<table class="tavle_list" border="0" cellspacing="0" cellpadding="0" ref="wrap"> <thead> <tr class="tr__typesw"> <th> 序号 </th> </tr> </thead> <tbody> <template v-for="(item, index) in dataArr"> <tr v-if="dataArr"> <td :rowspan="item.annualPlanList.length + 2" style="position: sticky; z-index: 9;left: 70px;"> 父级 </td> </tr> <template v-for="(items, indexs) in item.annualPlanList"> <!-- :key="indexs" --> <tr v-if="item.annualPlanList"> <td>子级</td> </tr> </template> <tr v-if="dataArr"> <td style="text-align: left;border-right: none; padding: 2px;position: sticky; z-index: 9;left: 230px;" colspan="1"> <el-button size="mini" type="primary" plain class="btn_list_c" icon="el-icon-plus" "> 添加项目部 </el-button> </td> </tr> </template> </tbody> </table>
下面是数据格式,根据自己的需求进行编写
dataArr: [{
name:'父级',
annualPlanList:[
{ name:'子级'}
]
}]