vue3 antdv3 将vxe-grid的头二行改为一行,解决最后一列不能自动根据屏幕的宽度自动缩放的问题。

news2024/9/23 5:16:30

1、先上个图:

官方地址:

Vxe Table v4.6

header搞了二层,然后反馈过来,让调整:

{
     title: '通讯地址',
     width: 200,
     showOverflow: 'tooltip',
     align: 'center',
     sortable: true,
     filters: companyOptions,
     filterRender: { name: 'FilterContent' },
     children: [
       {
         title: '地址',
         width: 100,
         field: 'addr_tx',
         showOverflow: 'tooltip',
         align: 'center',
         sortable: true,
         filters: companyOptions,
         filterRender: { name: 'FilterContent' },
       },
       {
         title: '邮编',
         width: 100,
         field: 'postcode_tx',
         showOverflow: 'tooltip',
         align: 'center',
         sortable: true,
         filters: companyOptions,
         filterRender: { name: 'FilterContent' },
       },
     ],
   },

修改:

{
         title: '通讯地址',
         width: 100,
         field: 'addr',
         showOverflow: 'tooltip',
         align: 'center',
         sortable: true,
         filters: companyOptions,
         filterRender: { name: 'FilterContent' },
       },
       {
         title: '邮编',
         width: 100,
         field: 'postcode',
         showOverflow: 'tooltip',
         align: 'center',
         sortable: true,
         filters: companyOptions,
         filterRender: { name: 'FilterContent' },
       },

这里如果想搞二列头,那么只要写成children:[]的格式就行。有些人喜欢多行表头,有的人不喜欢多行多头,当然这里最好是可以通过后台的设置,自动进行代码的调整是最优的解决方案。

2、然后列宽的问题:

将左右的滚动条给去了,那么我们就要考虑列不能太多,只要显示几列重要的信息就可以了,然后我们只能根据屏幕来自动调整宽度了。

 {
    title: '创建时间',
    minWidth: 100,
    maxWidth: 300,
    field: 'createdate',
    showOverflow: 'tooltip',
    align: 'center',
    sortable: true,
    // filters: companyOptions,
    // filterRender: { name: 'FilterContent' },
  },

这个里面有二个属性可以实现:

minWidth:最小的宽度,maxWidth:最大的宽度,如果屏幕是宽屏的话,那么会以最大的300去显示,这样就可以自动缩放到最大了。

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

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

相关文章

国内首个支持国产化信创的开源云原生平台

国产化信创是指中国本土信息技术和创新产业的发展和推广。随着各种形势的复杂变化,推动国产化和信创已成为信息产业发展的重要方向。在这一背景下,国内的技术企业和开发者们纷纷投入到开源国产化和自主创新的浪潮中,力图摆脱对国外技术和服务…

谷歌开源Gemma-2 百亿参数大模型,性能超越Llama-3模型,免费使用

Gemma 模型 Gemma模型是谷歌发布的一个开源模型,任何人都可以免费下载预训练模型,进行使用。而谷歌最近也发布了Gemma 2 模型,模型参数超过了 200 亿大官,果真大模型最后都是拼参数的时候吗。 Gemma 2 模型发布 Gemma 2 模型可以…

【Linux系统编程】进程间的通信——管道通信

目录 前言: 一,管道的认识 二,管道的深入了解 2-1,管道的特点 2-2,深入学习管道 2-3,管道的特殊情况 三,匿名管道 四,Ubuntu系统和VSCode的使用 4-1,Ubuntu和VSC…

【ARM+Codesys 客户案例 】 基于RK3568/A40i/STM32+CODESYS在智能制造中的应用案例:全自动切片机器人

蔬菜是人们日常生活必不可缺的食品,并且食用方法多种多样。自步入小康社会以来,人们的生活节奏越来越快,很多传统服务已不能满足人们的物质需求和生活节奏。日常生活中通过手工快速切菜严重地威胁着人身安全,切菜时间过长或切菜不…

异常信息转储笔记-获取源码行号

前情 上一篇笔记《异常信息转储预研笔记-堆栈地址转换》留下了两个待解决问题(如下图),问题1已在《异常信息转储笔记-demangle函数名字符》中解决,剩下问题2输出源码行号的问题还未能解决。 之前使用dladdr并未能将堆栈地址转换…

CourseGPT彻底改变本科学习

文章介绍了CourseGPT这一生成式AI工具,它基于Mistral AI的大型语言模型,旨在通过提供持续的教师支持和定期更新的课程材料来提升本科生的学习体验。CourseGPT能够利用课程特定的内容为学生提供精确和动态生成的回答,并且教师可以控制这些回答…

收藏:U盘加密软件哪个好用,防止U盘防复制软件

“物以稀为贵,藏之深则安。” 在信息时代的洪流中,数据之珍贵,无异于古时之金玉珠宝,而保护这些数据的安全,则成为了现代人心中的一道重要防线。 U盘,这小巧便携的数据存储工具,虽不及古时铜匣…

Jenkins-更新

文章目录 前言一、下载最新的war包二、安装最新的war包(一)查询Jenkins.war目录命令(二)切换到Jenkins.war的安装目录(三)上传最新Jenkins.war包 总结 前言 当我们在CentOS8 系统成功安装上Jenkins服务后&…

数据结构(6.2_1)——领接矩阵法

图的存储——邻接矩阵法 邻接矩阵(Adjacency Matrix)是一种使用二维数组来表示图的方法。在这种表示法中,矩阵的行和列都对应图的顶点。 特点 对于无向图,如果顶点i与顶点j之间有边,则矩阵的第i行第j列(…

pytorch实现单层线性回归模型

文章目录 简述代码重构要点 数学模型、运行结果数据构建与分批模型封装运行测试 简述 python使用 数值微分法 求梯度,实现单层线性回归-CSDN博客 python使用 计算图(forward与backward) 求梯度,实现单层线性回归-CSDN博客 数值微分…

会议中控系统有多少种编程方法

会议中控系统的编程方法并不局限于某一种固定的方式,而是根据系统的具体需求、开发团队的技能以及所选用的编程语言和技术栈等多种因素来决定的。以下是一些常见的会议中控系统编程方法和考虑因素: 1. 编程语言选择 会议中控系统的开发通常会选择以下几…

Kubernetes拉取阿里云的私人镜像

前提条件 登录到阿里云控制台 拥有阿里云的ACR服务 创建一个命名空间 获取仓库的访问凭证(可以设置固定密码) 例如 sudo docker login --usernameyourAliyunAccount registry.cn-guangzhou.aliyuncs.com 在K8s集群中创建一个secret 使用kubectl命令行…

qt生成一幅纯马赛克图像

由于项目需要&#xff0c;需生成一幅纯马赛克的图像作为背景&#xff0c;经过多次测试成功&#xff0c;记录下来。 方法一&#xff1a;未优化方法 1、代码&#xff1a; #include <QImage> #include <QDebug> #include <QElapsedTimer>QImage generateMosa…

AI跟踪报道第52期-新加坡内哥谈技术-本周AI新闻: X推出的惊人逼真的但不受约束的图像生成器和 GooglePixel 9

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

PostgreSQL-02-入门篇-查询数据

文章目录 1 简单查询SELECT 语句简介SELECT 语句语法SELECT 示例1) 使用 SELECT 语句查询一列数据的示例2) 使用 SELECT 语句查询多列数据的示例3) 使用 SELECT 语句查询表所有列数据的示例4) 使用带有表达式的 SELECT 语句的示例5) 使用带有表达式的 SELECT 语句的示例 2 列别…

大公报发表欧科云链署名文章:发行港元稳定币,建Web3.0新生态

欧科云链研究院资深研究员蒋照生近日与香港科技大学副校长兼香港Web3.0协会首席科学顾问汪扬、零壹智库创始人兼CEO柏亮&#xff0c;在大公报发布联合署名文章 ——《Web3.0洞察 / 发行港元稳定币&#xff0c;建Web3.0新生态》&#xff0c;引发市场广泛讨论。 文章就香港稳定币…

江科大/江协科技 STM32学习笔记P24

文章目录 DMA数据转运验证存储器映像的内容什么时候需要定义常量 验证外设寄存器的地址理解ADC1->DR main.c初始化DMADMA库函数MyDMA.cmain.c DMAAD多通道AD.cmain.c DMA数据转运 验证存储器映像的内容 #include "stm32f10x.h" // Device heade…

视频号分销系统搭建教程,源代码+部署上线指南

目录 一、视频号分销是什么&#xff1f; 二、视频号分销系统怎么搭建&#xff1f; 1.系统架构设计 2.部署与上线 3.持续迭代与升级 三、部分代码展示 一、视频号分销是什么&#xff1f; 视频号分销系统是合集了视频号商家的产品&#xff0c;推广达人推广商家的产品可赚取…

【算法 04】汉诺塔递归求解和通式求解

汉诺塔问题&#xff1a;一个经典的递归问题 汉诺塔&#xff08;Tower of Hanoi&#xff09;问题是一个源自古印度传说的经典益智游戏&#xff0c;也是心理学实验研究和计算机科学中常用的任务之一。该游戏通过三根高度相同的柱子和一系列大小及颜色不同的圆盘来构成&#xff0c…

[Python学习日记-7] 初识基本数据类型(下)

简介 我们在基本数据类型&#xff08;上&#xff09;当中介绍了数据类型中的数据类型&#xff08;整数、浮点数&#xff09;、字符串和布尔值&#xff0c;那么我们还剩下列表和数组还没有介绍了&#xff0c;在 Python 中&#xff0c;列表&#xff08;List&#xff09;是一种有序…