菜单 搜索
首页 前端知识 vue3 antd-vue@4 a-table单元格合并，rowSpan（行合并），colSpan（列合并）详解, 表头合并详解， 表头自定义详解

vue3 antd-vue@4 a-table单元格合并，rowSpan（行合并），colSpan（列合并）详解, 表头合并详解， 表头自定义详解

2024-06-16 09:06:09 前端知识 前端哥 142 22 我要收藏

一、解释

        1、rowSpan

                1）、行合并

                2）、当为0时：去掉边框

                3）、当为1时：不合并

                4）、大于1的x时：包含当前单元格行合并x个单元格

        2、colSpan

                1）、列合并

                2）、当为0时：去掉边框

                3）、当为1时：不合并

                4）、大于1的x时：包含当前单元格列合并x个单元格

二、代码实现核心代码位置

在table对应的列的 customCell 返回对应需要合并的参数

const state = reactive({
  columns: [
    {
      title: 'VLAN值',
      dataIndex: 'value',
      key: 'value',
      align: 'center',
      colSpan: 2, // 表头合并
      width: '120px',
 
      // 合并单元格配置
      customCell: (_, index) => {
        // _：当前行的数据， index：当前行的索引
        return {
          rowSpan:x,
          colSpan:y
        };
      }
    },
    {
      title: 'VLAN平面',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
      colSpan: 0, // 前面一个字段合并2个， 因此紧接着的这个字段这里需要设置成0
      width: '120px',
 
      // 合并单元格配置
      customCell: (_, index) => {
      // _：当前行的数据， index：当前行的索引
        return {
          rowSpan:x,
          colSpan:y
        };
      }
    },
    ...
    ]
})
复制

三、表格合并举例说明

1、初始效果

        

2、代码

        1）、完整代码里包行自定义表头的方法
<template>
  <div class="container-warp">
    <div class="content">
      <a-table
        class="ant-table-striped"
        bordered
        :dataSource="state.tableSource"
        :columns="state.columns"
        :pagination="pagination"
        :scroll="{ x: state.tableWidth }"
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
        <!-- 表头自定义 -->
        <template #headerCell="{ column }">
          <template v-if="column.dataIndex === 'deviceAttr1'">
            <div class="result-warp">
              <span>配置结果</span>
              <a-button :loading="state.resultLoading" type="link">
                <template #icon>
                  <SearchOutlined />
                </template>
              </a-button>
            </div>
          </template>
        </template>
        <!-- 表格标题自定义 -->
        <template #title="{ column }">
          <div style="text-align: center">！红色背景代表配置校验未通过，黄色背景代表配置校验需要二次确认</div>
        </template>
        <!-- 表格单元格自定义 -->
        <template #bodyCell="{ column, text, record, index }">
          <template v-if="column.dataIndex == 'status'">{{ statusEnum[text] }}</template>
          <template v-if="column.dataIndex == 'deviceAttr1'">
            <div
              style="padding: 5px 10px"
              :class="text == '未配置' ? 'result-un-config' : 'result-config'"
              :style="{ backgroundColor: text == '未配置' ? '#f00' : '#ff0', color: text == '未配置' ? '#fff' : '#000' }">
              {{ text }}
            </div>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>
 
<script setup>
import { getTableWidth } from '@/utils/index.utils.js';
import { reactive } from 'vue';
 
const state = reactive({
  columns: [
    {
      title: 'VLAN值',
      dataIndex: 'value',
      key: 'value',
      align: 'center',
      width: '120px',
      customCell: (_, index) => {
        return {};
      }
    },
    {
      title: 'VLAN平面',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
      width: '120px',
      customCell: (_, index) => {
        return {};
      }
    },
    { title: '设备名称', dataIndex: 'deviceName', key: 'deviceName', align: 'center', width: '200px' },
    { title: '设备属性1', dataIndex: 'deviceAttr1', key: 'deviceAttr1', align: 'center', width: '200px' },
    { title: '设备属性2', dataIndex: 'deviceAttr2', key: 'deviceAttr2', align: 'center', width: '200px' },
    { title: '设备属性3', dataIndex: 'deviceAttr3', key: 'deviceAttr3', align: 'center', width: '200px' },
    { title: '设备属性4', dataIndex: 'deviceAttr4', key: 'deviceAttr4', align: 'center', width: '200px' },
    { title: '设备属性5', dataIndex: 'deviceAttr5', key: 'deviceAttr5', align: 'center', width: '200px' },
    { title: '设备属性6', dataIndex: 'deviceAttr6', key: 'deviceAttr6', align: 'center', width: '200px' },
    {
      title: '确认状态',
      dataIndex: 'confirm',
      key: 'confirm',
      align: 'center',
      width: '120px',
      customCell: (_, index) => {
        return {};
      }
    }
  ],
  tableSource: [
    {
      value: '100',
      type: 'vlan',
      deviceName: '设备100-1',
      deviceAttr1: '已配置',
      deviceAttr2: '是',
      deviceAttr3: '是',
      deviceAttr4: '是',
      deviceAttr5: '是',
      deviceAttr6: '是',
      confirm: '已确认'
    },
    {
      value: '100',
      type: 'vlan',
      deviceName: '设备100-2',
      deviceAttr1: '未配置',
      deviceAttr2: '否',
      deviceAttr3: '否',
      deviceAttr4: '否',
      deviceAttr5: '否',
      deviceAttr6: '否',
      confirm: '已确认'
    },
    {
      value: '101',
      type: 'vlan',
      deviceName: '设备101',
      deviceAttr1: '未配置',
      deviceAttr2: '否',
      deviceAttr3: '否',
      deviceAttr4: '否',
      deviceAttr5: '否',
      deviceAttr6: '否',
      confirm: '待确认'
    },
    {
      value: '102',
      type: 'vlan',
      deviceName: '设备102-1',
      deviceAttr1: '未配置',
      deviceAttr2: '否',
      deviceAttr3: '否',
      deviceAttr4: '否',
      deviceAttr5: '否',
      deviceAttr6: '否',
      confirm: '待确认'
    },
    {
      value: '102',
      type: 'vlan',
      deviceName: '设备102-2',
      deviceAttr1: '未配置',
      deviceAttr2: '否',
      deviceAttr3: '否',
      deviceAttr4: '否',
      deviceAttr5: '否',
      deviceAttr6: '否',
      confirm: '待确认'
    },
    {
      value: '102',
      type: 'vlan',
      deviceName: '设备102-3',
      deviceAttr1: '未配置',
      deviceAttr2: '否',
      deviceAttr3: '否',
      deviceAttr4: '否',
      deviceAttr5: '否',
      deviceAttr6: '否',
      confirm: '待确认'
    }
  ],
  tableWidth: 1200
});
state.tableWidth = getTableWidth(state.columns);
</script>
 
<style lang="less" scoped>
.container-warp {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  padding: 20px;
  .content {
    padding: 20px;
    background-color: #fff;
  }
}
</style>
复制

 2、eg1:

如图， 假如需要合并 框出的两个单元格（列合并）

这个时候就需要使用列合并colSpan,将第1行的第一个字段与第2个字段就行，代码如下

 columns: [
    {
      title: 'VLAN值',
      dataIndex: 'value',
      key: 'value',
      align: 'center',
      width: '120px',
      customCell: (_, index) => {
        return {
          colSpan: index === 0 ? 2 : 1 // 第一个字段的第一行列合并 2
        };
      }
    },
    {
      title: 'VLAN平面',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
      width: '120px',
      customCell: (_, index) => {
        return {
          colSpan: index === 0 ? 0 : 1 // 第一个字段的第一行列合并 0， 去掉原有单元个
        };
      }
    },
    ...
]
复制

特别注意：

        如果合并2个， 第一个设置colSpan:2, 第一个后面紧接着的 1 个字段必须设置colSpan:0， 行合并也同理

        如果合并5个， 第一个设置colSpan:5, 第一个后面紧接着的 4 个字段必须设置colSpan:0， 行合并也同理

如果后面的不设置span：0就会出现一下结果：单元个往后推移了一个

3、eg2:

如图， 假如需要合并 框出的三个单元格（行合并）

这个时候就需要使用列合并rowSpan,将第1个字段的第一行到第3行合并，代码如下

const state = reactive({
  columns: [
    {
      title: 'VLAN值',
      dataIndex: 'value',
      key: 'value',
      align: 'center',
      width: '120px',
      customCell: (_, index) => {
        return {
          rowSpan: index === 0 ? 3 : 1
        };
      }
    },
    {
      title: 'VLAN平面',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
      width: '120px',
      customCell: (_, index) => {
        return {
          rowSpan: index === 1 || index === 2 ? 0 : 1
        };
      }
    },
    ...
  ]
})
复制

效果如下

特别注意：

        如果合并3行， 第一个设置rowSpan:2, 第一个后面紧接着的 2 行必须设置colSpan:0， 行合并也同理

        如果合并5个， 第一个设置rowSpan:5, 第一个后面紧接着的 4 行必须设置colSpan:0， 行合并也同理

4、eg3：

如图， 以valn值 为基础，由于vlan值重复， 需要合并如下图框处的单元格 （中间部分为设备信息， 一个vlan里出现了多台设备的情况）

根据需求， 就应该需要就可以得到，字段 vlan值、vlan平面、确认状态三个字段（三列）的第1行第2行需要合并在一起， 第4行-第6行需要合并，（所以就需要从这三个字段的 customCell 入手） 实现代码如下，(因为只是行合并就只需要操作rowSpan即可)

const state = reactive({
  columns: [
    {
      title: 'VLAN值',
      dataIndex: 'value',
      key: 'value',
      align: 'center',
      width: '120px',
      customCell: (_, index) => {
        return {
          rowSpan: _.rowSpan
        };
      }
    },
    {
      title: 'VLAN平面',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
      width: '120px',
      customCell: (_, index) => {
        return {
          rowSpan: _.rowSpan
        };
      }
    },
    ...
    {
      title: '确认状态',
      dataIndex: 'confirm',
      key: 'confirm',
      align: 'center',
      width: '120px',
      customCell: (_, index) => {
        return {
          rowSpan: _.rowSpan
        };
      }
    }
  ],
  tableSource: [
    {
      value: '100',
      type: 'vlan',
      deviceName: '设备100-1',
      deviceAttr1: '已配置',
      deviceAttr2: '是',
      deviceAttr3: '是',
      deviceAttr4: '是',
      deviceAttr5: '是',
      deviceAttr6: '是',
      confirm: '已确认',
      rowSpan: 2  // 第1行 行合并2个单元个
    },
    {
      value: '100',
      type: 'vlan',
      deviceName: '设备100-2',
      deviceAttr1: '未配置',
      deviceAttr2: '否',
      deviceAttr3: '否',
      deviceAttr4: '否',
      deviceAttr5: '否',
      deviceAttr6: '否',
      confirm: '已确认',
      rowSpan: 0  // 由于 第1行 行合并2个占用了此行，因此需要设置rowSpan: 0去掉此行
    },
    {
      // 第3行不合并不做处理 加上rowSpan:1也没有关系
      value: '101',
      type: 'vlan',
      deviceName: '设备101',
      deviceAttr1: '未配置',
      deviceAttr2: '否',
      deviceAttr3: '否',
      deviceAttr4: '否',
      deviceAttr5: '否',
      deviceAttr6: '否',
      confirm: '待确认'
    },
    {
      value: '102',
      type: 'vlan',
      deviceName: '设备102-1',
      deviceAttr1: '未配置',
      deviceAttr2: '否',
      deviceAttr3: '否',
      deviceAttr4: '否',
      deviceAttr5: '否',
      deviceAttr6: '否',
      confirm: '待确认',
      rowSpan: 3  // 第4行 行合并3个单元个， 因为行合并3后面的2行都要 rowSpan都要设置成0
    },
    {
      value: '102',
      type: 'vlan',
      deviceName: '设备102-2',
      deviceAttr1: '未配置',
      deviceAttr2: '否',
      deviceAttr3: '否',
      deviceAttr4: '否',
      deviceAttr5: '否',
      deviceAttr6: '否',
      confirm: '待确认',
      rowSpan: 0 // 由于 第4行 行合并2个占用了此行，因此需要设置rowSpan: 0去掉此行
    },
    {
      value: '102',
      type: 'vlan',
      deviceName: '设备102-3',
      deviceAttr1: '未配置',
      deviceAttr2: '否',
      deviceAttr3: '否',
      deviceAttr4: '否',
      deviceAttr5: '否',
      deviceAttr6: '否',
      confirm: '待确认',
      rowSpan: 0 // 由于 第4行 行合并2个占用了此行，因此需要设置rowSpan: 0去掉此行
    }
  ],
  tableWidth: 1200
});
复制

一下代码与上面代码等同

 
  columns: [
    {
      title: 'VLAN值',
      dataIndex: 'value',
      key: 'value',
      align: 'center',
      width: '120px',
      customCell: (_, index) => {
        let spanEmun = {
          0: 2,
          1: 0,
          2: 1,
          3: 3,
          4: 0,
          5: 0
        };
        return {
          rowSpan: spanEmun[index]
        };
      }
    },
    {
      title: 'VLAN平面',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
      width: '120px',
      customCell: (_, index) => {
        let spanEmun = {
          0: 2,
          1: 0,
          2: 1,
          3: 3,
          4: 0,
          5: 0
        };
        return {
          rowSpan: spanEmun[index]
        };
      }
    },
    { title: '设备名称', dataIndex: 'deviceName', key: 'deviceName', align: 'center', width: '200px' },
    { title: '设备属性1', dataIndex: 'deviceAttr1', key: 'deviceAttr1', align: 'center', width: '200px' },
    { title: '设备属性2', dataIndex: 'deviceAttr2', key: 'deviceAttr2', align: 'center', width: '200px' },
    { title: '设备属性3', dataIndex: 'deviceAttr3', key: 'deviceAttr3', align: 'center', width: '200px' },
    { title: '设备属性4', dataIndex: 'deviceAttr4', key: 'deviceAttr4', align: 'center', width: '200px' },
    { title: '设备属性5', dataIndex: 'deviceAttr5', key: 'deviceAttr5', align: 'center', width: '200px' },
    { title: '设备属性6', dataIndex: 'deviceAttr6', key: 'deviceAttr6', align: 'center', width: '200px' },
    {
      title: '确认状态',
      dataIndex: 'confirm',
      key: 'confirm',
      align: 'center',
      width: '120px',
      customCell: (_, index) => {
        let spanEmun = {
          0: 2,
          1: 0,
          2: 1,
          3: 3,
          4: 0,
          5: 0
        };
        return {
          rowSpan: spanEmun[index]
        };
      }
    }
  ],
复制

效果如下：

5、eg4:

自己项目遇到的合并信息

解释一下， 其实后端给的数据时这样的， 两个vlan信息，每个vlan信息下面都有自己的设备列表， 因此需要我们自己把设备列表提出来，实现满足table的格式，

这个时候就需要处理数据

结果如下

四、表头合并

        只需要在 columns 中设置 colSpan 即可， 跟表格原理一样

        eg:

                如图需要合并框出来的表头

       

        代码如下：
const state = reactive({
  columns: [
    ...
    { title: '设备属性集', dataIndex: 'deviceAttr2', key: 'deviceAttr2', colSpan: 5, align: 'center', width: '200px' },
    { title: '设备属性3', dataIndex: 'deviceAttr3', key: 'deviceAttr3', colSpan: 0, align: 'center', width: '200px' },
    { title: '设备属性4', dataIndex: 'deviceAttr4', key: 'deviceAttr4', colSpan: 0, align: 'center', width: '200px' },
    { title: '设备属性5', dataIndex: 'deviceAttr5', key: 'deviceAttr5', colSpan: 0, align: 'center', width: '200px' },
    { title: '设备属性6', dataIndex: 'deviceAttr6', key: 'deviceAttr6', colSpan: 0, align: 'center', width: '200px' },
    ...
  ],
})
复制
        效果如下：

        特别注意：从合并开始， 后面的字段都要设置成colSpan:0， 和单元个合并同理

​​​​​​​

转载请注明出处或者链接地址：https://www.qianduange.cn//article/12410.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！