vue跨行跨列动态表格生成

2022-06-07 21:36:18 阅读：204 来源： 互联网

标签：index vue 跨行跨列 standard item let shortgoal dict

一、思路步骤：

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

        <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": "成功标准" } ] } ] } ] 三、方法

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

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

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]}
    },

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

标签：index,vue,跨行,跨列,standard,item,let,shortgoal,dict
来源： https://www.cnblogs.com/zangaoY/p/16353448.html

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

ICode9

vue跨行跨列动态表格生成