uni-app解决表格uni-table样式问题

一、如何让表格文字只显示一行,超出部分用省略号表示

步骤 :
  • 给table设置table-layout:fixed; 列宽由表格宽度和列宽度设定。(默认是由单元格内容设定)
  • 让表格元素继承父元素宽度固定table-layout: inherit;
  • overflow: hidden;超过部分隐藏,text-overflow: ellipsis; 超出部分用省略号表示 ,white-space: nowrap; 不换行。
  • 给表格设置宽度:width: 360rpx; box-sizing: content-box;(计算过程不包括边框)
代码: 
  .uni-table {table-layout: fixed;// height: 15.5rem;overflow: hidden;text-overflow: ellipsis; //省略号表示white-space: nowrap; //不换行.uni-table-td {table-layout: inherit;overflow: hidden;text-overflow: ellipsis; //省略号表示white-space: nowrap; //不换行}.uni-table-th {width: 360rpx; // !importantbox-sizing: content-box;}}

二、如何固定表的第一列 

步骤: 

 在第一列uni-th中加上类名first,随后设置固定位置,个人尝试过使用position: sticky;在App中并没有生效。此外,element-plus导入到uni-app项目运行到真机中也会报错,因为样式冲突和导入方式等问题,无法使用,后续找到解决方案会更新,所以没有使用el-table来实现。

代码: 
.first {width: 120rpx;position: fixed;background-color: #FFFAF2;z-index: 10;
}

 三、如何利用弹出层实现弹框效果

步骤: 
  • 首先需要导入弹出层插件:uni-popup 弹出层 - DCloud 插件市场
  • 设置点击事件
  • 在弹出层内部写上你想演的内容和格式
代码: 
<!-- 弹出层 -->
<uni-popup ref="popup" :mask-click="false"><uni-table ref="table" border stripe><uni-tr><uni-th width="90" align="center">123</uni-th><uni-th width="200" align="center">123</uni-th></uni-tr><uni-tr><uni-th width="90" align="center">234</uni-th><uni-th width="200" align="center">234</uni-th></uni-tr><uni-tr><uni-th width="90" align="center">345</uni-th><uni-th width="200" align="center">345</uni-th></uni-tr></uni-table><button @click="close">关闭</button>
</uni-popup>

四、总数据条数和分页索引如何显示 

步骤: 

        通过检查页面效果来找到对应隐藏的内容,在进行样式设置,如果没有生效,考虑使用!important。

代码: 
.is-phone-hide {display: block;
}.uni-pagination {font-size: 24rpx;.uni-pagination__num-tag {margin: 0 20rpx;}.uni-pagination__num {display: inline-block;}
}

效果展示:

CSS全部代码: 
.uni-container {margin-top: 60rpx;.example-demonstration {height: 590rpx;}.uni-table {table-layout: fixed;// height: 15.5rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;.uni-table-td {table-layout: inherit;overflow: hidden;text-overflow: ellipsis; //省略号表示white-space: nowrap; //不换行}.uni-table-th {width: 360rpx; // !importantbox-sizing: content-box;}.taxId {padding-left: 60rpx;width: 240rpx;}uni-view {overflow: hidden;width: 100%;text-overflow: ellipsis; //省略号表示white-space: nowrap; //不换行}.first {width: 120rpx;// display: flex;position: fixed;background-color: #FFFAF2;z-index: 10;}.fixed-th {width: 77rpx;}}.is-phone-hide {display: block;}.uni-pagination {font-size: 24rpx;.uni-pagination__num-tag {margin: 0 20rpx;}.uni-pagination__num {display: inline-block;}}}

 以上内容参考:CSS table-layout 属性 | 菜鸟教程和uni-app官网

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

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

相关文章

list的简单模拟实现

文章目录 目录 文章目录 前言 一、使用list时的注意事项 1.list不支持std库中的sort排序 2.去重操作 3.splice拼接 二、list的接口实现 1.源码中的节点 2.源码中的构造函数 3.哨兵位头节点 4.尾插和头插 5.迭代器* 5.1 迭代器中的operator和-- 5.2其他迭代器中的接口 5.3迭代器…

【气象常用】剖面图

效果图&#xff1a; 主要步骤&#xff1a; 1. 数据准备&#xff1a;我用的era5的散度数据&#xff08;大家替换为自己的就好啦&#xff0c;era5数据下载方法可以看这里【数据下载】ERA5 各高度层月平均数据下载_era5月平均数据-CSDN博客&#xff09; 2. 数据处理&#xff1a…

windows10系统64位安装delphiXE11.2完整教程

windows10系统64位安装delphiXE11.2完整教程 https://altd.embarcadero.com/download/radstudio/11.0/radstudio_11_106491a.iso XE11.1 https://altd.embarcadero.com/download/radstudio/11.0/RADStudio_11_2_10937a.iso XE11.2 关键使用文件在以下内容&#xff1a;windows10…

Java Spring Boot 从必应爬取图片

获取图片主要就是通过必应图片页面控制台的元素&#xff0c;确认图片和标题在哪个类中&#xff08;浏览器 F12&#xff09; 引入依赖 这里需要引入两个依赖 jsoup 和 hutool maven依赖网站地址&#xff1a;Maven Repository: Search/Browse/Explore (mvnrepository.com) 挑选…

极简网络用户手册(1)

极简网络系统处理流程 模块位置&#xff1a;参数平台--专题分析--极简网络分析 步骤&#xff1a; 步骤一&#xff1a;创建精细化场景策略 步骤二&#xff1a;创建任务&#xff0c;主要选择策略&#xff08;包括√配置和距离配置&#xff09;和需要处理的小区清单&#xff08;源…

srcu浅析

本文代码基于linux内核4.19.195 之前写了rcu、rcu nocb的文章&#xff0c;感觉还差个srcu就完整了&#xff0c;现在补齐一下。 SRCU&#xff08;Sleepable RCU&#xff09;是rcu的一个变体&#xff0c;顾名思义&#xff0c;就是在rcu的读临界区中允许睡眠&#xff0c;而rcu在读…

CCF-GESP 等级考试 2023年6月认证C++四级真题解析

2023年09月真题 一、单选题&#xff08;每题2分&#xff0c;共30分&#xff09; 第 1 题 高级语言编写的程序需要经过以下&#xff08; &#xff09;操作&#xff0c;可以生成在计算机上运行的可执行代码。 A. 编辑B. 保存C. 调试D. 编译 答案&#xff1a;D 解析&#xff1a;…

FS212E 系列PD协议

PD快充协议芯片FS212EL、FS212EH可以智能的识别插入的手机类型&#xff0c;选择最为合适的协议应对手机快充需要。兼容多类USB Type-C协议&#xff0c;包括TypeC协议、TypeC PD2.0、TypeC PD3.0、TypeC PD3.2等协议。集成OPTO输出&#xff0c;通过电阻直驱反馈光耦。FS212E 的调…

C++函数模版和C#的泛型函数的区别

函数模板和C#的泛型函数在概念上是非常相似的&#xff0c;都是用于创建能够处理多种数据类型的通用函数。它们的主要区别点在于语法和实现细节上&#xff1a; 语法&#xff1a; C 中的函数模板使用 template <typename T> 或者 template <class T> 来声明模板&am…

新手学习STM32还是ESP32

对于新手来说&#xff0c;选择学习STM32还是ESP32取决于个人的学习目标和背景。以下是针对这两种微控制器的详细分析&#xff0c;以便您做出更明智的选择&#xff1a; STM32 1. 处理器架构与性能 STM32采用单核或多核处理器架构&#xff0c;基于ARM Cortex-M0&#xff0c;M0…

PlantUML-使用文本来画时序图

介绍 PlantUML 是一个开源工具&#xff0c;用户可以使用纯文本描述来创建 UML (统一建模语言) 图形。由于它使用文本来描述图形&#xff0c;因此可以很容易地将这些描述与源代码一起存储在版本控制系统中。然后&#xff0c;PlantUML 负责将这些描述转换为图形。 资料 官方文…

k8s部署1.27.3版本,使用containerd模式

环境 操作系统&#xff1a;centos7.9 机器&#xff1a;1个master 和 1个node 节点&#xff08;云ECS&#xff09; 系统设置 # 所有机器设置hostname hostnamectl set-hostname master1 hostnamectl set-hostname node1# 所有机器增加内网ip和 master1 对应关系 vi /etc/ho…

杂牌记录仪TS视频流恢复方法

大多数的记录仪都采用了MP4/MOV文件方案&#xff0c;极少数的可能在用AVI文件&#xff0c;极极少数的在用TS文件方案。很多人可能不太解TS文件&#xff0c;这是一种古老的视频文件结构&#xff0c;下边这个案例我们来看下TS视频文件的恢复方法。 故障存储:8G存储卡/fat32文件系…

2-1RT-Thread线程管理-笔记

2-1RT-Thread线程管理-笔记 其中系统线程由内核创建&#xff0c;如main函数和空闲线程都属于系统线程&#xff0c;而用户线程是由应用程序所创建的。 对于资源较大的MCU可以适当设计较大的线程栈&#xff0c;也可以在初始化时设置一个具体的数值&#xff0c;如1K或2K字节。…

索引 ---- mysql

目录 1. 索引 1.1 概念 1.2 作用 1.3 使用场景 1.4 使用 1.4.1查看索引 1.4.2 创建索引 1.4.3 删除索引 1.5 注意事项 1.6 索引底层的数据结构 (面试经典问题) 1. 索引 1.1 概念 索引是一种特殊的文件&#xff0c;包含着对数据表里所有记录的引用指针。可以对表中的…

2006NOIP普及组真题 2. 开心的金明

线上OJ&#xff1a; 【06NOIP普及组】开心的金明 本题只要把 1、限定金额看成背包总容量 2、每件物品的价格 v 看成占用背包的体积 3、每件物品的价格v乘以权重w作为该物品的价值 则本题可套用标准的01背包问题模板&#xff1a; f [ j ] m a x ( f [ j ] , f [ j − v ] w …

Redis单线程

Redis是基于Reactor模式开发的网络事件处理器,这个处理器是单线程的,所 以redis是单线程的。 为什么它是单线程还那么快呢? 主要有以下几个原因: 一、纯内存操作 由于Redis是 纯内存操作,相比于磁盘来说,内存就快得多,这个是Redis快的主要 原因。 二、多路复用I/O机制(…

优先队列优化哈夫曼编码

前言 个人小记 一、代码 #include <stdio.h> #include <stdlib.h> #include <string.h> #include <time.h> #define MAX_NODE 80 #define MAX_STR 50 #define MAX_HEAP 100 #define father(i) ((i)/2) #define left(i) ((i)*2) #define right(i) …

11.3 指针和函数

11.3 指针和函数 本节必须掌握的知识点&#xff1a; 指针作为函数的参数 数组作为函数的参数 指针作为函数的返回值 在C语言中&#xff0c;指针的一个重要作用就是作为函数参数使用&#xff0c;本节将介绍这一重要作用。 11.3.1 指针作为函数的参数 实验一百一十三&#xff…

电磁兼容(EMC):BUCK变换器基本原理及传导辐射分析设计

目录 1. BUCK电路拓扑及原理 2. Buck拓扑电路电磁场分析 3.总结 开关电源替代线性电源&#xff0c;解决了效率和体积问题&#xff0c;但也带来了新的EMI问题。开关电源也是产品内部的强辐射源之一&#xff0c;基于透过现象看本质&#xff0c;将复杂问题简单化&#xff0c;本…