vue跨行跨列动态表格生成

本文主要是介绍vue跨行跨列动态表格生成，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、思路步骤：

1. 根据后台传输的数据进行格式转化；
2. 索引为多少的时候进行跨行；

        <table id="table">
          <thead>
          <tr>
            <th class="field">领域</th>
            <th class="task">任务目标</th>
            <th class="shorttask">短期目标</th>
            <th class="standard">成功标准</th>
            <th class="remask">教学情景</th>
            <th class="remask">开始时间</th>
            <th class="remask">结束时间</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in datafilter(fieldlist) " :key="index">
            <td v-if="getfieldRow(index).flag" :rowspan="getfieldRow(index).value">{{ item.field }}</td>
            <td v-if="gettaskRow(index).flag" :rowspan="gettaskRow(index).value">{{ item.task }}</td>
            <td>{{ item.shortgoal_item }}</td>
            <td>{{ item.standard }}</td>
            <td v-if="getfieldRow(index).flag" :rowspan="getfieldRow(index).value">单训课、家庭康复指导</td>
            <td></td>
            <td></td>
          </tr>
          </tbody>
        </table>

二、后台json数据格式：

"fieldlist": [             {                 "field": "A领域",                 "tasklist": [                     {                         "task": "任务目标A1",                         "shortgoal": [                             {                                 "shortgoal_item": "短期目标1",                                 "standard": "成功标准"                             },                             {                                 "shortgoal_item": "短期目标2",                                 "standard": "成功标准"                             }                         ]                     },                       {                         "task": "任务目标A2",                         "shortgoal": [                             {                                 "shortgoal_item": "短期目标1",                                 "standard": "成功标准"                             },                             {                                 "shortgoal_item": "短期目标2",                                 "standard": "成功标准"                             },                               {                                 "shortgoal_item": "短期目标3",                                 "standard": "成功标准"                             }                         ]                     }                 ]             }                ] 三、方法

1. datafilter方法对后台数据进行转化成一个数组装所有的内容对象；

2. getallRow方法得到表格总共有多少行；

3. gettaskRow、getfieldRow方法进行计算某一列中的哪一行需要跨行（rowspan）

    datafilter(fieldlist) {
      let arr = []
      for (let item of fieldlist) {
        for (let i of item.tasklist) {
          for (let j of i.shortgoal) {
            arr.push({
              field: item.field,
              task: i.task,
              shortgoal_item: j.shortgoal_item,
              standard: j.standard
            })
          }
        }

      }
      console.log(arr)
      console.log(arr.length)
      return arr
    },
    getallRow() {

      let allnumbers = 0
      for (let item of this.fieldlist) {
        for (let i of item.tasklist) {
          allnumbers = allnumbers + i.shortgoal.length
        }
      }
      return allnumbers
    },
    gettaskRow(inx) {
      let index = 0
      let dict = {}
      let dictfliter = {}
      for (let item of this.fieldlist) {
        for (let i = -1; i < item.tasklist.length - 1; i++) {
          index = index + item.tasklist[i + 1].shortgoal.length
          dict[index] = item.tasklist[i + 1].shortgoal.length
        }
      }
      for (let item = 0; item < Object.keys(dict).length; item++) {
        if (item == 0) {
          dictfliter["0"] = Number(Object.keys(dict)[item])
          dictfliter[Object.keys(dict)[item]] = Object.values(dict)[item + 1]
        } else {
          dictfliter[Object.keys(dict)[item]] = Object.values(dict)[item + 1]
        }
      }
      // console.log(dictfliter)
      return {flag: dictfliter.hasOwnProperty(inx), value: dictfliter[inx]}
    },
    getfieldRow(inx) {
      let count = 0
      let dict = {}
      for (let item of this.fieldlist) {
        let index = 0
        for (let i of item.tasklist) {
          index = index + i.shortgoal.length //计算某个领域对应的所有短期目标的条目
        }
        dict[count] = index
        count = count + index
      }
      // console.log(dict)
      return {flag: dict.hasOwnProperty(inx), value: dict[inx]}
    },

博主，暂时没有想到更好的方法进行跨行跨列动态表格的生成，若有大家更好的建议，欢迎大家留言~

这篇关于vue跨行跨列动态表格生成的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！