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

news2024/11/18 7:51:01

一、解释

        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, 和单元个合并同理

​​​​​​​

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1683911.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

反序列化漏洞(JBoss、apache log4、apache Shiro、JWT)Weblogic未授权访问、代码执行、任意上传

1.1什么是反序列化 就是把一个对象变成可以传输的字符串&#xff0c;目的就是为了方便传输。假设&#xff0c;我们写了一个class&#xff0c;这个class里面存有一些变量。当这个class被实例化了之后&#xff0c;在使用过程中里面的一些变量值发生了改变。以后在某些时候还会用到…

CTF网络安全大赛简单web题目:eval

题目来源于&#xff1a;bugku 题目难度&#xff1a;简单 一道简单web的题目 题目源代码&#xff1a; <?phpinclude "flag.php";$a $_REQUEST[hello];eval( "var_dump($a);");show_source(__FILE__); ?> 这个PHP脚本有几个关键部分&#xff0c;但…

Salesforce ADFS SSO 配置

1.set up 中 Certificate and Key Management创建认证 2.setup中Single Sign-On Settings新建SSO&#xff0c;输入必填 3.setup中My Domain Settings设置登录跳转&#xff1a; 最后将Single Sign-On Settings中metadata.xml下载下来给ADFS端使用&#xff1a; 最后效果&#xff…

快手二面准备【面试准备】

快手二面准备【面试准备】 前言版权快手二面准备秋招一面中的问题实习一面中的问题计算机网络和操作系统论坛项目登录注册ThreadLocal代替session存储用户秒杀项目登录注册->阿里验证码->rpcsession为什么改为token实现&#xff0c;redis存储用户信息由binlog的用法->…

新火种AI|净利润上升628%,英伟达财报说明AI热潮还将持续

作者&#xff1a;一号 编辑&#xff1a;美美 AI大潮仍未放缓&#xff0c;英伟达再次超越预期。 今天凌晨&#xff0c;全球AI算力芯片龙头&#xff0c;被称为“AI时代卖铲人”的英伟达&#xff0c;正式公布了截至2024年4月28日的2025财年第一财季财报&#xff0c;其中第一财季…

【九十三】【算法分析与设计】719. 找出第 K 小的数对距离,N 台电脑的最长时间,二分答案法

719. 找出第 K 小的数对距离 - 力扣&#xff08;LeetCode&#xff09; 数对 (a,b) 由整数 a 和 b 组成&#xff0c;其数对距离定义为 a 和 b 的绝对差值。 给你一个整数数组 nums 和一个整数 k &#xff0c;数对由 nums[i] 和 nums[j] 组成且满足 0 < i < j < nums.le…

uniapp星空效果

uniapp星空效果 背景实现思路代码实现尾巴 背景 之前在网上看到过一个视频&#xff0c;使用纯css实现过一个星空效果。具体出处找不到了&#xff0c;我们按照他那个思路来实现一个类似的效果&#xff0c;还是先上一张图镇楼&#xff1a; 实现思路 首先我们这个效果使用的是…

es数据备份和迁移Elasticsearch

Elasticsearch数据备份与恢复 前提 # 注意&#xff1a; 1.在进行本地备份时使用--type需要备份索引和数据&#xff08;mapping,data&#xff09; 2.在将数据备份到另外一台ES节点时需要比本地备份多备份一种数据类型&#xff08;analyzer,mapping,data,template&#xff09; …

JAVA开发面试超详细

一、Java 基础 1.JDK 和 JRE 有什么区别&#xff1f; jdk&#xff1a;java development kit jre&#xff1a;java runtime Environment jdk是面向开发人员的&#xff0c;是开发工具包&#xff0c;包括开发人员需要用到的一些类。 jre是java运行时环境&#xff0c;包括java虚拟机…

使用可接受gitlab参数的插件配置webhook

jenkins配置 安装Generic Webhook Trigger 配置远程触发令牌 勾选Print post content和Print contributed variables用于打印值 配置gitlab 选择新增webhook 配置webhook http://JENKINS_URL/generic-webhook-trigger/invoke,将JENKINS_URL修改成自己的jenkins地址 先保存…

Docker(四) 文件和网络

1 Dockerfile 1.1 什么是Dockerfile Dockerfile是一个文本文件&#xff0c;包含一系列命令&#xff0c;这些命令用于在 Docker 镜像中自动执行操作。Dockerfile 定义了如何构建 Docker 镜像的步骤和所需的操作。 Dockerfile 中包含的命令可以设置和定制容器的环境&#xff0c;…

30.包名的修改和新建后端模块

权限和第三方登录确实令人头疼,我们来学一点简单一点的。 另外,如果各位有属于自己的域名和ICP/IP备案,布置一个作业,自行实现第三方QQ登录。 我们所说的包名修改,是一次性修改ruoyi的全部包名,因为发现很多人有这样的需求,下载别人的代码,想要改成自己公司的包名,结…

android11屏蔽下拉菜单快捷开关

1.文件位置&#xff1a; frameworks/base/packages/SystemUI/res/values/config.xml a.这个文件定义了初始化的一些组件&#xff0c;部分代码如下&#xff1a; //overlay/frameworks/base/packages/SystemUI/res/values/config.xml<!-- The default tiles to display in …

git使用介绍

一、为什么做版本控制&#xff08;git是版本控制工具&#xff09; 为了保留之前所以的版本&#xff0c;以便回滚和修改 二、点击安装 三、基础操作 1、初步认识 想要让git对一个目录进行版本控制需要以下步骤&#xff1a; 进入要管理的文件夹进行初始化命令 git init管理…

工厂做外贸,国内公司跟香港公司有什么区别

最近有不少做内贸的工厂朋友想转型做外贸&#xff0c;问我要不要单独注册一个公司&#xff0c;以及注册哪里的公司&#xff0c;国内的公司跟香港的公司有什么区别&#xff1f;今天就简单来给大家分享一下这块的一个区别。 首先工厂转型做外贸的话&#xff0c;比较建议注册一个…

【C++】 单例设计模式的讲解

前言 在我们的学习中不免会遇到一些要设计一些特殊的类&#xff0c;要求这些类只能在内存中特定的位置创建对象&#xff0c;这就需要我们对类进行一些特殊的处理&#xff0c;那我们该如何解决呢&#xff1f; 目录 1. 特殊类的设计1.1 设计一个类&#xff0c;不能被拷贝&#xf…

算法特训,AB5 .点击消除BC.149简写单词牛客.除2!牛客.Fibonacci数列

目录 AB5 .点击消除 BC.149简写单词 牛客.除2&#xff01; 牛客.Fibonacci数列 AB5 .点击消除 点击消除&#xff0c;类似于括号匹配a(b[b]a){c{d,这种&#xff0c;利用栈去消除,这样正好可以处理&#xff0c;假如相同就不进栈&#xff0c;同时还要出栈。注意我们这么搞完他是…

Leaflet【二】图层绘制——UI图层【点线面】 矢量图层【img、svg】

layer图层 在leaflet当中使用图层比OL当中简便一点&#xff0c;我们创建的layer图层可以直接通过 addTo 方法加到地图上&#xff0c;不需要通过layer、source再去做一些区分&#xff0c; 图标 Icon 创建Marker时提供的一个Icon 详细配置–>go // 导入一张图片作为图标imp…

在 Android 上存档短信:4 种方法的终极指南

概括 无论是个人对话还是专业信件&#xff0c;我们的短信收件箱很快就会因大量线程和对话而变得混乱。为了帮助管理这种过载&#xff0c;许多 Android 用户转向了归档短信这一便捷功能。在本指南中&#xff0c;我们将探讨如何在 Android 设备上存档短信的详细信息&#xff0c;…

文心一言 VS 讯飞星火 VS chatgpt (265)-- 算法导论20.1 4题

四、假设不使用一棵叠加的度为 u \sqrt{u} u ​ 的树&#xff0c;而是使用一棵叠加的度为 u 1 k u^{\frac{1}{k}} uk1​的树&#xff0c;这里 k 是大于 1 的常数&#xff0c;则这样的一棵树的高度是多少&#xff1f;又每个操作将需要多长时间&#xff1f;如果要写代码&#xf…