标签：vue value01 表格 value bb item 菜单 table data

<template>
  <div>
    <table>
      <thead>
        <th>ID</th>
        <th>所属部门</th>
        <th>姓名</th>
        <th>年龄</th>
      </thead>
      <tbody>
        <template v-for="(item,num) in tableData">
          <tr :key="num+'-'+'1'">
            <td :rowspan="item.rowSpanData.length * item.rowSpanData[0].data.length">{{item.rowSpanName}}</td>
            <td :rowspan="item.rowSpanData[0].data.length">{{item.rowSpanData[0].value01}}</td>
            <td>bb</td>
            <td>bb</td>
          </tr>
          <tr v-for="(ele,inx) in item.rowSpanData[0].data.length-1" :key="num+'--'+inx">
            <td>s</td>
            <td>s</td>
          </tr>
          <template v-for="(te,index) in item.rowSpanData.length-1">
            <tr :key="index+'-'+'2'">
              <td :rowspan="item.rowSpanData[0].data.length">{{item.rowSpanData[0].value01}}</td>
              <td>bb</td>
              <td>bb</td>
            </tr>
            <tr v-for="(ele,inx) in item.rowSpanData[0].data.length-1" :key="index+'-'+inx">
              <td>s</td>
              <td>s</td>
            </tr>
          </template>
        </template>

      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData:[
        {
          rowSpanName:'一级菜单',
          rowSpanData:[
            {
              value01:"二级菜单",
              data:[{value:"a"},{value:"a"}]
            },
            {
              value01:"二级菜单",
              data:[{value:"a"},{value:"a"}]
            },
            {
              value01:"二级菜单",
              data:[{value:"a"},{value:"a"}]
            },
            {
              value01:"二级菜单",
              data:[{value:"a"},{value:"a"}]
            },
          ]
        }
      ]
    }
  },
}
</script>

<style lang="less" scoped>
  table{
    tr{
      td{
        border: 1px solid black;
      }
    }
  }
</style>

关键在与:key不能重

来源：https://wenku.baidu.com/view/1f62a33451d380eb6294dd88d0d233d4b14e3f7e.html

标签：vue,value01,表格,value,bb,item,菜单,table,data
来源： https://www.cnblogs.com/brillant/p/16377292.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。