element table 合并表头合并列合并行

最新推荐文章于 2025-06-22 19:56:09 发布

原创

最新推荐文章于 2025-06-22 19:56:09 发布 · 1.9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #js

本文记录了使用Element UI实现表格合并的过程，包括表头、行和列的合并。在实践中遇到诸多问题，通过处理数据和调整CSS解决了这些问题。提供了示例代码和数据格式说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一下首次合并表格。

遇到了很多坑，这是解决后的代码

ui的设计图（也是最终效果啦）

element 的table：

 <div class="category">
      <el-table
        :data="alldata"
        :span-method="arraySpanMethod"
        :header-row-style="{ height: '56px', background: '#E5E5E5' }"
        :header-cell-style="tableHeaderColor"
        border
        style="width: 100%; margin-top: 5px"
      >
        
        <el-table-column prop label="设备未知" align="center">
          <template>
            <el-table-column prop="category"></el-table-column>
            <el-table-column prop="activityName"></el-table-column>
            <el-table-column prop="message"></el-table-column>
          </template>
       
        </el-table-column>
         <el-table-column prop="value" label="数字A"> </el-table-column>
        <el-table-column prop="value" label="数字B"> </el-table-column>
        <el-table-column prop="value" label="数字C"> </el-table-column>
        <el-table-column prop="value" label="数字D"> </el-table-column>
        <el-table-column prop="value" label="数字E"> </el-table-column>
        <el-table-column prop="value" label="数字F"> </el-table-column>
    
      </el-table>
    </div>

js：data的数据格式

 data() {
    return {
     
      list: [
        {
          id: "16EE8A54E6917F6479905CDC5B031F22",
          activityPointsDOS: [
            {
              id: "16EE8A54E0C17F647404A2DC7783EE88",
              activityPointsDOS: [
                {
                  id: "1",
                  value: "6",
                  activityName: "坚定政治立场。",
                  message: " （1）牢固树立“四个意识”巴拉巴拉",