vue+element弹框展示测试报告

log:

使用了element里面的  el-popover 用来点击弹出页面，页面内容用了原生的table表格实现（初学vue仅记录）

<el-popover placement="right" width="800PX" trigger="click">
              <div>
                <b>项目：{{formData.project}}  &emsp;&emsp;用例覆盖率：{{GetPercent(scanResult[0].identical.length,scanResult[0].disparate.length)}}&emsp;&emsp;
                  总覆盖：{{scanResult[0].identical.length}}条
                </b>
                <el-divider content-position="left">异常如下</el-divider>
                  <div style="overflow-x: auto; overflow-y: auto; height: 250px; width:100%;">
                    <table border width="100%" height="350px" style="border-collapse:collapse; margin: 0 auto;">
                      <tr style="background-color: #CCE8EB;text-align: center;">
                        <th>服务</th>
                        <th>版本</th>
                        <th>异常类型</th>
                        <th>结果</th>
                      </tr>
                      <tr style="background: #F5FAFA;">
                        <td style="width:100px;text-align: center;" rowspan="2">{{serviceList[formData.service]['service']}}</td>
                        <td style="width:100px;text-align: center;" rowspan="2">{{versionList[formData.version]['version']}}</td>
                        <td style="width:80px;color:red;text-align: center;"><b>未覆盖</b></td>
                        <td><span v-for="(data,index) in scanResult[0].disparate">{{index+1}}、{{data}}<br></span></td>
                      </tr>
                      <tr style="background: #F5FAFA;">
                        <td style="width:80px;color:#FF8C00;text-align: center;"><b>用例异常</b></td>
                        <td><span v-for="(data,index) in scanResult[0].lp3Dis">{{index+1}}、{{data}}<br></span></td>
                      </tr>
                    </table>
                  </div>
                </div>
              <el-button type="info" slot="reference">点击查看扫描结果</el-button>
            </el-popover>

实现结果：