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

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

2024-06-16 09:06:09 前端知识 前端哥 30 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基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

情人节程序员用HTML网页表白【爱的计时】 HTML5七夕情人节表白网页源码 HTML CSS JavaScript

2024-06-22 01:06:05

html5 标签的分类及样式的分类和优先级

2024-06-22 01:06:04

前端开发 4: jQuery

2024-06-22 01:06:02

基于javaweb mysql的ssm固定资产管理系统(java ssm jsp jquery bootstrap mysql)

2024-06-22 01:06:36

基于html5的国家历史文物网站的设计与实现-计算机毕业设计源码63653

2024-02-03 12:02:00

无涯教程-jQuery - Button组件函数

2024-06-22 01:06:21

计算机毕业设计 基于html5的图书管理系统的设计与实现 Java实战项目 附源码 文档 视频讲解

2024-06-22 01:06:18

网页开发 HTML

2024-06-22 01:06:17

HTML:七天学会写基础网页11

2024-06-22 01:06:13

Web前端资深架构师分享学习经验及总结，jQuery入门到精通（四，2024最新前端笔经

2024-06-22 01:06:10

大家推荐的文章
1

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
2

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
3

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
4

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
5

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
6

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
7

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
8

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
9

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
10

UE4.27支持HTML5

2024-05-07 13:05:261000

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

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

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

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

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