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

最新推荐文章于 2024-08-13 23:10:15 发布

爱养猫的木子

最新推荐文章于 2024-08-13 23:10:15 发布

阅读量1.7k

点赞数

文章标签： html5 javascript js

本文链接：https://blog.csdn.net/Quiet_123/article/details/121402644

版权

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

摘要由CSDN通过智能技术生成

记录一下首次合并表格。

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

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: "坚定政治立场。",
                  m