Element-Ui实现评分表，评分项，一个例子掌握table合并行和列，computed计算总分，某级分类的最大评分值，超详细！逐行注释。

 效果图如下，这是最近公司的一个需求，由于网上例子较少，所以在完善代码后决定发布出来供大家参考。

首先我们的数据库中是以id，pid形式存储的数据，最多分为四级评分项，在这个例子中不涉及到后台拼接数据的内容，只是前端编写的假数据进行展示，需要实现后端的小伙伴可以按照我的数据格式去用sql查询出对应的格式即可复用。

起初接到这个需求的时候很苦恼，因为没有写过类似的内容，给了一个excel，让通过页面展示出来，最终还要填写分数，校验并存入到数据库中，刚开始想着是通过树状table展示，可是这样的话离图中效果差距很大，估计也是不能接收，下面就看看我是如何实现的吧。

页面效果实现：

<template>
  <div class="pd_1 hasTableContainer">
    <el-table
      :data="testData"
      :span-method="objectSpanMethodS"
      border style="width: 100%"
      :header-cell-style="headerStyle">
      <el-table-column prop="levelTwoId" label="序号" align="center" width="100">
      </el-table-column>
      <el-table-column prop="levelOne" label="评估项目（一级）" align="center">
      </el-table-column>
      <el-table-column prop="levelTwo" label="评估项目（二级）" align="center">
      </el-table-column>
      <el-table-column prop="maxScore" label="最大分值" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.levelTwoId === '总分'">
            {
  
  {sum}}
            {
  
  {totalScore}}
          </div>
          <div v-if="scope.row.levelTwoId !== '总分'">
            {
  
  {scope.row.maxScore}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="levelThree" label="评分标准" align="center" width="100">
      </el-table-column>
      <el-table-column prop="levelFour" align="center">
      </el-table-column>
      <el-table-column prop="score" label="分数" align="center">
        <template slot-scope="scope">
          <el-input
            placeholder="分数"
            v-model="scope.row.score"
            :disabled="scope.row.levelThree === '不具备'"
            type="number"
            step="1"
            min="0"
            @input="scope.row.score = inputVerification(scope.row)"
          ></el-input>