当前位置: 首页 > 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;这使得它们比固定大小的数组更加灵活。…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...