JS（Vue）数据处理实战（二）

本文链接： https://blog.csdn.net/q95548854/article/details/95605840

有如下需求：

将数据通过表格展示。

数据：

testStatusObj: {
  BIOS: {
    Passed: 16,
    Failed: 2,
    NotRun: 61,
    InProgress: 3,
    Nocheckpoint: 1
  },
  BMC: {
    NotRun: 30,
    Passed: 27,
    InProgress: 1,
    Nocheckpoint: 1
  },
  OTHER: {
    Failed: 2,
    InProgress: 2,
    Nocheckpoint: 19,
    NotRun: 75,
    Passed: 26
  },
  RMC: {
    Passed: 25,
    NotRun: 48
  },
  SV: {
    Blocked: 1,
    Failed: 1,
    InProgress: 1,
    Nocheckpoint: 3,
    NotRun: 101,
    Passed: 15
  }
}

表格：
在这里插入图片描述

规则如下：

All：所有數量（包括No checkpoin、Not Run等）
Plan：等於 All
Complete：Passed 加上 Failed 的數量
CompleteRate：Complete 除以 Plan 取整
Block：Blocked 的數量
其他 Rate 类似 CompleteRate 都是以Plan为分母
数据中没有的为 0

使用 html + js 编写模板：

新建一个 topic2.html，将下列代码复制到其中：

<html>
	<head>
		<title>js数据处理实战（二）</title>
	</head>
	<body>
    <table border="1" width="50%" id="table">
      <tr>
        <th>Test module</th>
        <th>All</th>
        <th>Plan</th>
        <th>Complete</th>
        <th>CompleteRate</th>
        <th>Pass</th>
        <th>PassRate</th>
        <th>Fail</th>
        <th>FailRate</th>
        <th>Block</th>
        <th>BlockRate</th>
      </tr>
    </table>

    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
      // 已有数据
      let testStatusObj = {
        BIOS: {
          Passed: 16,
          Failed: 2,
          NotRun: 61,
          InProgress: 3,
          Nocheckpoint: 1
        },
        BMC: {
          NotRun: 30,
          Passed: 27,
          InProgress: 1,
          Nocheckpoint: 1
        },
        OTHER: {
          Failed: 2,
          InProgress: 2,
          Nocheckpoint: 19,
          NotRun: 75,
          Passed: 26
        },
        RMC: {
          Passed: 25,
          NotRun: 48
        },
        SV: {
          Blocked: 1,
          Failed: 1,
          InProgress: 1,
          Nocheckpoint: 3,
          NotRun: 101,
          Passed: 15
        }
      }
      disposeData()
      function disposeData () {
        const dataList = []
        // 写处理数据的代码
        
        // 添加到页面
        addTable(dataList)
      }

      function DeepClone (obj) {
        if (obj === null || typeof obj !== 'object') return obj
        let cpObj = obj instanceof Array ? [] : {}
        for (let key in obj) cpObj[key] = DeepClone(obj[key])
        return cpObj
      }

      function addTable (list) {
        list.forEach(item => {
          addLine(item.testModule, item.all, item.plan, item.complete, item.completeRate, item.pass, item.passRate, item.fail, item.failRate, item.block, item.blockRate)
        });
      }

      function addLine (testModule, all, plan, complete, completeRate, pass, passRate, fail, failRate, block, blockRate) {
        let tr = document.createElement("tr");
        let str = '<td>' + testModule + '</td>';
        str += '<td>' + all + '</td>';
        str += '<td>' + plan + '</td>';
        str += '<td>' + complete + '</td>';
        str += '<td>' + completeRate + '</td>';
        str += '<td>' + pass + '</td>';
        str += '<td>' + passRate + '</td>';
        str += '<td>' + fail + '</td>';
        str += '<td>' + failRate + '</td>';
        str += '<td>' + block + '</td>';
        str += '<td>' + blockRate + '</td>';
        tr.innerHTML = str;
        let tab = document.getElementById("table");
        tab.appendChild(tr);
      }

    </script>
	</body>
</html>

Vue模式编写

在线编辑地址：点我

JS（Vue）数据处理实战（二）

使用 html + js 编写模板：

Vue模式编写

猜你喜欢