antd table表格设置最小宽度，列宽等比例显示

最近ui有个设计稿，表格要求如图：

由于本地antd table列宽column没有设置最小宽度minWidth属性，只有width属性，所以开发时我考虑按照列宽等比例计算后去设置width属性；

一、实现：


1.表头数组中设置minWidth属性，固定列操作栏直接写width属性即可

this.headerArr = [{dataIndex: 'indexShortName',title: '指标名称',minWidth: 320,},{dataIndex: 'dataValue',title: '最新值',minWidth: 120,align: 'right',},{ dataIndex: 'unit', title: '单位', minWidth: 80 },{dataIndex: 'changePrice',title: '涨跌',minWidth: 100,scopedSlots: { customRender: 'changePrice' },align: 'right',},{dataIndex: 'chgPercent',title: '涨跌幅',minWidth: 100,scopedSlots: { customRender: 'chgPercent' },align: 'right',},{ dataIndex: 'dataDate', title: '数据日期', minWidth: 100 },{dataIndex: 'action',title: '操作',align: 'center',fixed: 'right',scopedSlots: { customRender: 'action' },width: 118,},]
二、创建完表头数据后，执行等比例列宽计算获取每列width

1.headerArr:表头数组

2.allwidth:表格所占宽度

3.fixedWidth:所有固定列总宽度
4.excludeList:不用计算的数组，一般保留一列不去设置width,让它自适应即可

//headerArr:要处理的表头，allWidth表格宽度，fixedWidth：固定列宽度，excludeList：排除不需要设置的序列autoHeader(headerArr, allWidth, fixedWidth, excludeList) {let autoWidth = allWidth - fixedWidthlet bili = headerArr.map((e) => (e.minWidth ? e.minWidth : 0)).reduce((a, b) => a + b)headerArr.forEach((e, index) => {if (!e.fixed) {if (excludeList && excludeList.length > 0) {if (!excludeList.includes(index)) {e.width = autoWidth * (e.minWidth / bili)}} else {e.width = autoWidth * (e.minWidth / bili)}}})return headerArr},
 三、执行完成后还需添加监听事件，让表格列宽能够自适应并且动态显示滚动条

1.elementResizeDetectorMaker是监听组件，此处监听表格父容器的宽度变化，当宽度>=938时执行计算列宽等比函数，当宽度<938时表格显示横向滚动条，表头数组直接写上width

 //响应页面宽度变化，动态设置表头列宽this.erd = elementResizeDetectorMaker()this.erd.listenTo(document.querySelector('.wrap'), (element) => {console.log('element', element.clientWidth)if (element.clientWidth >= 938) {this.headerArr = this.autoHeader(this.headerArr,document.querySelector('.wrap').clientWidth,118,[0],)this.ScrollOBJ = {}} else {this.ScrollOBJ = { x: 938 }this.headerArr = [{dataIndex: 'indexShortName',title: '指标名称',minWidth: 320,},{dataIndex: 'dataValue',title: '最新值',width: 120,minWidth: 120,align: 'right',},{ dataIndex: 'unit', title: '单位', width: 80, minWidth: 80 },{dataIndex: 'changePrice',title: '涨跌',width: 100,minWidth: 100,scopedSlots: { customRender: 'changePrice' },align: 'right',},{dataIndex: 'chgPercent',title: '涨跌幅',width: 100,minWidth: 100,scopedSlots: { customRender: 'chgPercent' },align: 'right',},{dataIndex: 'dataDate',title: '数据日期',width: 100,minWidth: 100,},{dataIndex: 'action',title: '操作',align: 'center',fixed: 'right',scopedSlots: { customRender: 'action' },width: 118,},]}})
四、全部代码如下：
<template><div class="wrap"><a-tableclass="myTable":class="{ 'empty-table': !tableArr.length }"id="define-table":columns="headerArr":data-source="tableArr":locale="tablenodata":loading="loading":scroll="ScrollOBJ":pagination="false"v-if="tableReash"><template slot="changePrice" slot-scope="text, record"><span:style="{color:record.changePrice > 0? '#E25454': record.changePrice < 0? '#12A96E': ''}">{{ record.changePrice }}</span></template><template slot="chgPercent" slot-scope="text, record"><span:style="{color:record.chgPercent > 0? '#E25454': record.chgPercent < 0? '#12A96E': ''}">{{record.chgPercent > 0? "+" + record.chgPercent + "%": record.chgPercent + "%"}}</span></template><template slot="action" slot-scope="text, record"><span class="add-code" @click="addCode(record)"><span class="add-code-img"></span>添加指标</span></template></a-table></div>
</template>
<script>
import { Table } from "ant-design-vue";
import noResult from "@/components/no-result.vue";
import elementResizeDetectorMaker from "element-resize-detector";
export default {components: {ATable: Table,"no-result": noResult},data() {return {loading: false,headerArr: [],tableArr: [],ScrollOBJ: {},tradingDay: "",updateTime: "",commonHeight: "",tablenodata: {emptyText: <no-result title="暂无数据" size="small"></no-result>},tableReash: true,marginTopPx: 90};},mounted() {this.ScrollOBJ =document.querySelector(".wrap").clientWidth >= 938 ? {} : { x: 938 };this.setHeader();//this.setScrollY()//响应页面宽度变化，动态设置表头列宽this.erd = elementResizeDetectorMaker();this.erd.listenTo(document.querySelector(".wrap"), element => {console.log("element", element.clientWidth);if (element.clientWidth >= 938) {this.headerArr = this.autoHeader(this.headerArr,document.querySelector(".wrap").clientWidth,118,[0]);this.ScrollOBJ = {};} else {this.ScrollOBJ = { x: 938 };this.headerArr = [{dataIndex: "indexShortName",title: "指标名称",minWidth: 320},{dataIndex: "dataValue",title: "最新值",width: 120,minWidth: 120,align: "right"},{ dataIndex: "unit", title: "单位", width: 80, minWidth: 80 },{dataIndex: "changePrice",title: "涨跌",width: 100,minWidth: 100,scopedSlots: { customRender: "changePrice" },align: "right"},{dataIndex: "chgPercent",title: "涨跌幅",width: 100,minWidth: 100,scopedSlots: { customRender: "chgPercent" },align: "right"},{dataIndex: "dataDate",title: "数据日期",width: 100,minWidth: 100},{dataIndex: "action",title: "操作",align: "center",fixed: "right",scopedSlots: { customRender: "action" },width: 118}];}this.tableReash = false;console.log("this.ScrollOBJ", this.ScrollOBJ);this.$nextTick(() => {this.tableReash = true;});});},methods: {//上游价格指数--设置表头setHeader() {this.headerArr = [{dataIndex: "indexShortName",title: "指标名称",minWidth: 320},{dataIndex: "dataValue",title: "最新值",minWidth: 120,align: "right"},{ dataIndex: "unit", title: "单位", minWidth: 80 },{dataIndex: "changePrice",title: "涨跌",minWidth: 100,scopedSlots: { customRender: "changePrice" },align: "right"},{dataIndex: "chgPercent",title: "涨跌幅",minWidth: 100,scopedSlots: { customRender: "chgPercent" },align: "right"},{ dataIndex: "dataDate", title: "数据日期", minWidth: 100 },{dataIndex: "action",title: "操作",align: "center",fixed: "right",scopedSlots: { customRender: "action" },width: 118}];this.tableArr = [{indexShortName: "Mysteel普钢价格指",dataValue: "3590.14",unit: "元/吨",changePrice: "5.87",chgPercent: "0.16",dataDate: "2024/10/28",indexCode: "ID20128188"},{indexShortName: "Mysteel普钢价格指",dataValue: "3590.14",unit: "元/吨",changePrice: "5.87",chgPercent: "0.16",dataDate: "2024/10/28",indexCode: "ID20128188"},{indexShortName: "Mysteel普钢价格指",dataValue: "3590.14",unit: "元/吨",changePrice: "-5.87",chgPercent: "-0.16",dataDate: "2024/10/28",indexCode: "ID20128188"},{indexShortName: "Mysteel普钢价格指",dataValue: "3590.14",unit: "元/吨",changePrice: "-5.87",chgPercent: "-0.16",dataDate: "2024/10/28",indexCode: "ID20128188"},{indexShortName: "Mysteel普钢价格指",dataValue: "3590.14",unit: "元/吨",changePrice: "5.87",chgPercent: "0.16",dataDate: "2024/10/28",indexCode: "ID20128188"},{indexShortName: "Mysteel普钢价格指",dataValue: "3590.14",unit: "元/吨",changePrice: "5.87",chgPercent: "0.16",dataDate: "2024/10/28",indexCode: "ID20128188"}];this.tableArr = [...this.tableArr, ...this.tableArr];//表头按比例设置宽度this.headerArr = this.autoHeader(this.headerArr,document.querySelector(".wrap").clientWidth,118,[0]);},//headerArr:要处理的表头，allWidth表格宽度，fixedWidth：固定列宽度，excludeList：排除不需要设置的序列autoHeader(headerArr, allWidth, fixedWidth, excludeList) {let autoWidth = allWidth - fixedWidth;let bili = headerArr.map(e => (e.minWidth ? e.minWidth : 0)).reduce((a, b) => a + b);headerArr.forEach((e, index) => {if (!e.fixed) {if (excludeList && excludeList.length > 0) {if (!excludeList.includes(index)) {e.width = autoWidth * (e.minWidth / bili);}} else {e.width = autoWidth * (e.minWidth / bili);}}});return headerArr;}}
};
</script>
<style lang="less" scoped></style>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

算法沉淀一：双指针

算法沉淀一：双指针

目录 前言&#xff1a; 双指针介绍 对撞指针 快慢指针 题目练习 1.移动零 2.复写零 3.快乐数 4.盛水最多的容器 5.有效三角形的个数 6.和为s的两个数 7.三数之和 8.四数之和 前言&#xff1a; 此章节介绍一些算法&#xff0c;主要从leetcode上的题来讲解&#xff…
阅读更多...
若点集A=B则A必能恒等变换地变为B=A这一几何常识推翻直线（平面）公理

若点集A=B则A必能恒等变换地变为B=A这一几何常识推翻直线（平面）公理

黄小宁 关键词&#xff1a;“更无理”复数 复平面z各点z的对应点z1的全体是z1面。z面平移变为z1面就使x轴⊂z面沿本身平移变为ux1轴。R可几何化为R轴&#xff0c;R轴可沿本身平移变为R′轴&#xff0c;R′轴可沿本身平移变为R″轴&#xff0c;...。直线公理和平面公理使几百年…
阅读更多...
HelloMeme 上手即用教程

HelloMeme 上手即用教程

HelloMeme是一个集成空间编织注意力的扩散模型&#xff0c;用于生成高保真图像和视频。它提供了一个代码库&#xff0c;包含实验代码和预训练模型&#xff0c;支持PyTorch和FFmpeg。用户可以通过简单的命令行操作来生成图像和视频。 本文将详细介绍&#xff0c;如何在GPU算力租…
阅读更多...
Vue2+ElementUI：用计算属性实现搜索框功能

Vue2+ElementUI：用计算属性实现搜索框功能

前言&#xff1a; 本文代码使用vue2element UI。 输入框搜索的功能&#xff0c;可以在前端通过计算属性过滤实现&#xff0c;也可以调用后端写好的接口。本文介绍的是通过计算属性对表格数据实时过滤&#xff0c;后附完整代码&#xff0c;代码中提供的是死数据&#xff0c;可…
阅读更多...
blind-watermark - 水印绑定

blind-watermark - 水印绑定

文章目录 一、关于 blind-watermark安装 二、bash 中使用三、Python 调用1、基本使用2、attacks on Watermarked Image3、embed images4、embed array of bits 四、并发五、相关 Project 一、关于 blind-watermark Blind watermark 基于 DWT-DCT-SVD. github : https://githu…
阅读更多...
【小白可懂】微信小程序---课表渲染

【小白可懂】微信小程序---课表渲染

结果展示&#xff1a;&#xff08;代码在最后&#xff09; WeChat_20241116174431 项目简介 在数字化校园建设的大背景下&#xff0c;为了更好地服务于在校师生&#xff0c;我们开发了一款基于微信小程序的课表管理系统。该系统采用了现代化的前端技术和优雅的设计风格&#x…
阅读更多...
Kafka一些常用的命令行操作【包含主题命令、生产者和消费者命令】

Kafka一些常用的命令行操作【包含主题命令、生产者和消费者命令】

文章目录 1、主题命令2、生产者命令行操作3、消费者命令行操作 1、主题命令 查看当前服务器中的所有 topic&#xff1a; kafka-topics.sh --bootstrap-server node01:9092 --list 创建topic&#xff1a; kafka-topics.sh --bootstrap-server node01:9092 --create --topic to…
阅读更多...
C# x Unity 从玩家控制类去分析命令模式该如何使用

C# x Unity 从玩家控制类去分析命令模式该如何使用

本文部分内容出自游戏编程模式一书,游戏编程模式,有兴趣的小伙伴可以去看看,虽然不是unity x c#写的 但是思路挺好的 目录 目录 0.先说结论 发现问题 命令模式如何解耦 打个断点更利于分析 怎么实现延迟命令? 如何撤销命令? 脚本整体一览 不足分析(AI) 0.先说结论 …
阅读更多...
Day44 | 动态规划 ：状态机DP 买卖股票的最佳时机IV买卖股票的最佳时机III

Day44 | 动态规划 ：状态机DP 买卖股票的最佳时机IV买卖股票的最佳时机III

Day44 | 动态规划 &#xff1a;状态机DP 买卖股票的最佳时机IV&&买卖股票的最佳时机III&&309.买卖股票的最佳时机含冷冻期 动态规划应该如何学习&#xff1f;-CSDN博客 本次题解参考自灵神的做法&#xff0c;大家也多多支持灵神的题解 买卖股票的最佳时机【…
阅读更多...
IDEA2024：右下角显示内存

IDEA2024：右下角显示内存

使用场景&#xff1a; 实时知晓idea内存使用情况 解决方案: 开启内存显示 View -> Apperance -> Status Bar Widgets -> Memory Indicator 效果如下&#xff1a;
阅读更多...
HBase理论_背景特点及数据单元及与Hive对比

HBase理论_背景特点及数据单元及与Hive对比

本文结合了个人的笔记以及工作中实践经验以及参考HBase官网&#xff0c;我尽可能把自己的知识点呈现出来&#xff0c;如果有误&#xff0c;还请指正。 1. HBase背景 HBase作为面向列的数据库运行在HDFS之上&#xff0c;HDFS缺乏随机读写操作&#xff0c;HBase正是为此而出现。…
阅读更多...
git创建远程仓库，以gitee码云为例GitHub同理

git创建远程仓库，以gitee码云为例GitHub同理

git远程Remote服务端仓库构建的视频教程在这 Git建立服务端Remote远程仓库&#xff0c;gitee码云例&#xff0c;Github_哔哩哔哩_bilibili 1、登gitee码云/Github 登录 - Gitee.com https://github.com/ &#xff08;没账号的注册一下就行&#xff09; 点击如下图位置的创…
阅读更多...
windows工具 -- 使用rustdesk和云服务器自建远程桌面服务, 手机, PC, Mac, Linux远程桌面 (简洁明了)

windows工具 -- 使用rustdesk和云服务器自建远程桌面服务, 手机, PC, Mac, Linux远程桌面 (简洁明了)

目的 向日葵最先放弃了, todesk某些功能需要收费, 不想用了想要 自己搭建远程桌面 自己使用希望可以电脑 控制手机分辨率高一些 原理理解 ubuntu云服务器配置 够买好自己的云服务器, 安装 Ubuntu操作系统 点击下载 hbbr 和 hbbs 两个 deb文件: https://github.com/rustdesk/…
阅读更多...
计算机网络各层设备总结归纳(更新ing)

计算机网络各层设备总结归纳(更新ing)

计算机网络按照OSI&#xff08;开放式系统互联&#xff09;模型分为七层&#xff0c;每一层都有其特定的功能和对应的网络设备。以下是各层对应的设备&#xff1a; 1. 物理层&#xff08;Physical Layer) 设备&#xff1a;中继器&#xff08;Repeater&#xff09;、集线器…
阅读更多...
Oracle19C AWR报告分析之Wait Classes by Total Wait Time

Oracle19C AWR报告分析之Wait Classes by Total Wait Time

Oracle19C AWR报告分析之Wait Classes by Total Wait Time 一、分析数据二、详细分析2.1 指标参数介绍2.2 数据库性能分析2.3 综合性能评估 在 Oracle 数据库的 AWR 报告中&#xff0c;Wait Classes by Total Wait Time 是评估数据库性能的重要部分。本篇文章主要是介绍指标参数…
阅读更多...
基本数据类型和包装类型的区别、缓存池、自动拆箱装箱（面试题）

基本数据类型和包装类型的区别、缓存池、自动拆箱装箱（面试题）

目录 1. 八种基本类型及对应包装类型 2. 基本类型和包装类型 区别 3. 自动拆箱装箱 3.1 自动装箱 3.2 自动拆箱 3.3 缓存池 4. 高频面试案例分析 1. 八种基本类型及对应包装类型 基本数据类型类型描述范围&#xff08;指数形式&#xff09;位数包装类型byte整型&#x…
阅读更多...
Python酷库之旅-第三方库Pandas(221)

Python酷库之旅-第三方库Pandas(221)

目录 一、用法精讲 1036、pandas.DatetimeIndex.to_pydatetime方法 1036-1、语法 1036-2、参数 1036-3、功能 1036-4、返回值 1036-5、说明 1036-6、用法 1036-6-1、数据准备 1036-6-2、代码示例 1036-6-3、结果输出 1037、pandas.DatetimeIndex.to_series方法 10…
阅读更多...
基于SpringBoot网上超市的设计与实现录像

基于SpringBoot网上超市的设计与实现录像

基于SpringBoot网上超市的设计与实现录像 SpringBoot网上超市的设计与实现录像
阅读更多...
【vmware+ubuntu16.04】vm虚拟机及镜像安装-tools安装包弹不出来问题

【vmware+ubuntu16.04】vm虚拟机及镜像安装-tools安装包弹不出来问题

学习机器人这门课需要下载虚拟机&#xff0c;做一下记录 首先我下载的是vm虚拟机16&#xff0c; 下载版本可参考该文章课堂上我下载 的镜像是16.04&#xff0c;虚拟机安装教程和镜像添加可参考该博主 按照教程安装成功 安装tools&#xff0c;但是我的弹不出来那个压缩包&…
阅读更多...
ssm126基于HTML5的出租车管理系统+jsp(论文+源码)_kaic

ssm126基于HTML5的出租车管理系统+jsp(论文+源码)_kaic

设计题目&#xff1a;出租车管理系统的设计与实现 摘 要 网络技术和计算机技术发展至今&#xff0c;已经拥有了深厚的理论基础&#xff0c;并在现实中进行了充分运用&#xff0c;尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代&#xff0c;所以…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023