修改vue页面的表格样式

怎么把网页中的表格改成下面的样式？

代码如下：

   name="7">
        <template #title>
          作业评价
        template>
        row :gutter="40" class="dialogrow">
          table class="margin-top" :column="3" border style="width: 100%" :data="records">
            table-column  label="评分项" align="center"  prop="supItems">table-column>
            table-column  label="评分项评分" align="center" prop="subEvaluationScore" >table-column>
            table-column  label="评价总分" align="center" prop="totalScore" >table-column>
            table-column  label="评价内容" align="center" prop="evalutionContent" >table-column>
          table>
        row>
      

在elementui中tabel表格支持最底部进行合并处理，
倒数第二第三个表格就是你需要的样子，它也支持自定义

https://element.eleme.cn/#/zh-CN/component/table

• 你可以参考下这篇文章：解决vue修改数据页面无效的问题

elementui里最下面有个合计啊，把合计改为你想要的就可以了

可以用合并单元格 啊 或者楼上说的合计行