当前位置: 首页 > news >正文

Vxe UI vue vxe-table 实现自适应列宽,根据内容自适应列的宽度

Vxe UI vue vxe-table 实现自适应列宽,根据内容自适应列的宽度

之前老版本是通过计算字符数量,然后给动态给每一列设置宽度,不仅麻烦,还不好复用。
看了 API 发现 v4.7+ 和 v3.9+ 版本已经直接就能支持了,只需加上 width=‘auto’ 就能自适应宽度。

代码

<template><div><vxe-tablebordershow-footer:data="tableData":footer-data="footerData"><vxe-column type="seq" width="80"></vxe-column><vxe-column field="name" title="Name" width="300"></vxe-column><vxe-column field="age" title="Age" width="auto"></vxe-column><vxe-column field="sex" title="头部宽度 头部宽度 头部" width="auto"></vxe-column><vxe-column field="address" title="Address" width="auto"></vxe-column></vxe-table></div>
</template><script setup>
import { ref } from 'vue'
const tableData = ref([{ id: 10001, name: 'Test1', role: 'Develop Develop Develop ', sex: 'Man', age: 28, address: '内容宽度' },{ id: 10002, name: 'Test2', role: 'Test Test Test Test Test Test Test', sex: 'Women', age: 22, address: '内容宽度 内容宽度 内容宽度 内容宽度 内容宽度 内容宽度' },{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: '内容宽度 内容宽度 内容宽度 内容' }
])
const footerData = ref([{ age: '尾部宽度 尾部宽度 尾部' }
])</script>

确实完美,所有列都能根据内容自适应宽度,
支持 width=‘auto’、min-width=‘auto’,包括列宽拖动等所有功能都能兼容。

在这里插入图片描述

相关文章:

Vxe UI vue vxe-table 实现自适应列宽,根据内容自适应列的宽度

Vxe UI vue vxe-table 实现自适应列宽&#xff0c;根据内容自适应列的宽度 之前老版本是通过计算字符数量&#xff0c;然后给动态给每一列设置宽度&#xff0c;不仅麻烦&#xff0c;还不好复用。 看了 API 发现 v4.7 和 v3.9 版本已经直接就能支持了&#xff0c;只需加上 widt…...

document.visibilityState 监听浏览器最小化

1.document.hidden&#xff1a; 表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 &#xff08;注意&#xff0c;页面被其他软件遮盖并不算隐藏&#xff0c;比如打开的 sublime 遮住了浏览器&#xff09;。 2.document.visibilityState&#xff…...

前端框架对比和选择

​ 大家好&#xff0c;我是程序员小羊&#xff01; 前言&#xff1a; 前端框架选择是前端开发中的关键决策&#xff0c;因为它影响项目的开发效率、维护成本和可扩展性。当前&#xff0c;最流行的前端框架主要包括 React、Vue 和 Angular。它们各有优劣&#xff0c;适用于不同…...

Linux 进程2

环境变量 再Linux操作系统中一切皆文件&#xff0c;这个环境变量自然也是一个文件&#xff0c;它的作用是辅助我们使用操作系统还可以辨识我们是什么用户(一般用户&#xff0c;root用户)。 env是读取完整环境变量的指令&#xff0c;里面记录了许多我登录操作系统所用的用户的信…...

WPF入门教学六 Grid布局进阶

在WPF&#xff08;Windows Presentation Foundation&#xff09;中&#xff0c;Grid布局是一种非常强大且灵活的布局控件&#xff0c;它允许你创建复杂的用户界面。以下是Grid布局的一些进阶技巧和教学&#xff1a; 一、基本概念回顾 Grid定义&#xff1a;Grid是一个用于布局…...

while循环及简单案例

//循环是流程控制中的一个重要分支 //流程控制 条件判断 循环 逻辑处理 //循环的目的和意义 //循环的目的是为了执行一块代码 //循环的意义是为了简化代码。增加代码的复用性 /* //例如输出0-100的数…...

电子看板实时监控数据可视化助力工厂精细化管理

在当今竞争激烈的制造业领域&#xff0c;工厂的精细化管理成为提高竞争力的关键。而电子看板实时监控数据可视化作为一种先进的管理工具&#xff0c;正为工厂的精细化管理带来巨大的助力。 一、工厂精细化管理的挑战 随着市场需求的不断变化和客户对产品质量要求的日益提高&am…...

邮储银行:面向金融行业的移动应用安全风险监测案例

本项目通过在移动应用中植入威胁情报探针并结合网络镜像流量方式,利用应用运行过程中设备、系统、应用、行为四个维度数据,将其与设备的关键因子关联生成唯一的移动设备指纹;对手机银行等应用资产进行资产台账梳理;结合服务端大数据分析平台的各种模型规则分析,实时监测移…...

ARMxy车辆数据采集Linux智能控制器

在当今科技日新月异的时代&#xff0c;高效智能的边缘计算设备在众多领域发挥着关键作用。我们的 ARM 边缘计算机&#xff0c;凭借其卓越的性能和广泛的适用性&#xff0c;成为车队管理智能化的核心力量。 一、强大硬件配置&#xff0c;完美适配车队管理需求 ARM 边缘计算机支…...

7.Java高级编程 多线程

Java高级编程 多线程 文章目录 Java高级编程 多线程一、进程与线程查看线程 二、线程创建方式三、线程状态四、线程常用方法五、线程安全 一、进程与线程 一个程序有一个进程 一个进程包含多个线程&#xff08;必须有一个主线程&#xff09; 并发&#xff1a; 在同一时刻&a…...

MT8370|MTK8370(Genio 510 )安卓核心板参数介绍

MTK Genio 510 (MT8370)安卓核心板是一款极为先进的高性能平台&#xff0c;专为满足边缘处理、先进多媒体功能及全面的连接需求而设计&#xff0c;适用于多种人工智能(AI)和物联网(IoT)应用场景。它具备多个高分辨率摄像头支持和可联网触摸屏显示&#xff0c;适用于使用多任务高…...

动物识别系统Python+卷积神经网络算法+TensorFlow+人工智能+图像识别+计算机毕业设计项目

一、介绍 动物识别系统。本项目以Python作为主要编程语言&#xff0c;并基于TensorFlow搭建ResNet50卷积神经网络算法模型&#xff0c;通过收集4种常见的动物图像数据集&#xff08;猫、狗、鸡、马&#xff09;然后进行模型训练&#xff0c;得到一个识别精度较高的模型文件&am…...

【STL】priority_queue 基础,应用与操作

c在C的标准模板库&#xff08;STL&#xff09;中&#xff0c;priority_queue 是一个基于堆的容器适配器&#xff0c;用于实现优先级队列。它本质上是一个最大堆&#xff08;Max-Heap&#xff09;&#xff0c;即每次取出元素时&#xff0c;始终取出优先级最高的元素。本文将详细…...

tasklist命令的应用实例

tasklist命令的应用实例 引言 在系统管理和故障排查过程中&#xff0c;了解当前正在运行的进程信息是至关重要的。Windows操作系统提供了一个强大的命令行工具——tasklist&#xff0c;它可以帮助用户查看当前系统中所有正在运行的进程及其相关信息。掌握这个命令的使用&…...

基于协同过滤算法+PHP的新闻推荐系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于协同过滤算法PHPMySQL的新…...

196页满分PPT | 集团流程优化及IT规划项目案例

细阐述了XX集团信息化建设的总体目标、指导原则、信息架构规划、应用系统架构规划、IT基础设施架构规划以及IT管控模式设计。文档内容涵盖了从现状分析到未来三年信息化建设目标的明确&#xff0c;以及如何通过IT系统支持集团的战略升级。 背景痛点 总体信息架构规划 总体信息架…...

Android 使用高德地图实现道格拉斯 - 普克算法

道格拉斯 - 普克算法&#xff08;Douglas-Peucker algorithm&#xff09;是一种用于曲线简化的算法。 一、算法的作用 该算法的主要目的是在保持曲线形状特征的前提下&#xff0c;通过减少数据点的数量来简化曲线。这在地图绘制、图形处理、地理信息系统等领域有广泛的应用。例…...

OpenAI GPT o1技术报告阅读(2)- 关于模型安全性的测试案例

✨报告阅读&#xff1a;使用大模型来学习推理(Reason) 首先是原文链接&#xff1a;https://openai.com/index/learning-to-reason-with-llms/ 接下来我们看一个简单的关于模型安全性的测试&#xff0c;当模型被问到一个有风险的话题时&#xff0c;会如何思考并回答用户呢&…...

Stream流的思想和获取Stream流

首先介绍流的概念&#xff1a; 流可以理解为一条流水线&#xff0c;在这条流水线中有许多操作&#xff0c;比如筛选所需要的数据&#xff0c;输出打印等&#xff0c; 经过这条流水线&#xff0c;可以获取到自己所需要的数据&#xff1a; -->所以&#xff1a; Stream流的作…...

go语言中的切片详解

1.概念 在Go语言中&#xff0c;切片&#xff08;Slice&#xff09;是一种基于数组的更高级的数据结构&#xff0c;它提供了一种灵活、动态的方式来处理序列数据。切片在Go中非常常用&#xff0c;因为它们可以动态地增长和缩小&#xff0c;这使得它们比固定大小的数组更加灵活。…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...

安卓基础(Java 和 Gradle 版本)

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...