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;源…

FS212E 系列PD协议

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

PlantUML-使用文本来画时序图

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

杂牌记录仪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;包含着对数据表里所有记录的引用指针。可以对表中的…

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;本…

T检验——单样本t检验/两独立样本t检验/配对样本t检验

T检验——单样本t检验/两独立样本t检验/配对样本t检验 1.单样本t检验1.1 适用范围 2. &#xff08; 独立样本t检验&#xff09;两独立样本t检验3.ANOVA多组样本显著性检验&#xff08;2组以上&#xff09;4. 配对样本T检验 1.单样本t检验 1.1 适用范围 单样本t检验:即已知样本…

成功解决“IndexError: deque index out of range”错误的全面指南

成功解决“IndexError: deque index out collections.deque out of range”错误的全面指南 引言 在Python编程中&#xff0c;collections.deque 是一个双端队列&#xff08;double-ended queue&#xff09;&#xff0c;支持从两端快速添加和删除元素。然而&#xff0c;与列表&…

Linux网络-守护进程版字典翻译服务器

文章目录 前言一、pid_t setsid(void);二、守护进程翻译字典服务器&#xff08;守护线程版&#xff09;效果图 前言 根据上章所讲的后台进程组和session会话&#xff0c;我们知道如果可以将一个进程放入一个独立的session&#xff0c;可以一定程度上守护该进程。 一、pid_t se…

mysql(数据库)可视化工具——Navicat Premium

Navicat Premium是一款功能强大的数据库管理工具&#xff0c;它支持多种数据库管理系统&#xff0c;包括MySQL、MariaDB、SQL Server、SQLite、Oracle和PostgreSQL等。Navicat Premium提供了直观的用户界面&#xff0c;使用户能够轻松地管理数据库结构、执行复杂的SQL查询、导入…

CUDA Unity Compute Shader 3

计划 这应该是第3章的读书笔记&#xff0c;但是因为第3章读起来比较困难&#xff0c;所以先看了《CUDA并行程序设计编程指南》的第5章和第6章&#xff0c;感觉读起来顺畅多了&#xff0c;《CUDA并行程序设计编程指南》暂定精读第5、6、7章 1.如何生成ptx文件 属性->CUDA C/…

[QT] MAC使用Qt Creator运行程序如何仅运行一个进程?

大家刚开始使用QtCreator会发现每次run程序&#xff0c;都会出现一个程序进程&#xff0c;使得调试操作增加。如下&#xff0c;每次run都会出现一个demo14的进程。 如何每次run后&#xff0c;就关闭上一次的进程&#xff0c;而重新拉起新进程呢&#xff1f; 看这里 这是默认…

Redis-02

redis安装包位置 /opt/redis-7.2.5 redis默认安装路径&#xff1a; 配置文件路径&#xff1a;/usr/local/bin/redisconfig gcc安装位置 /opt/rhredis启动&#xff1a; 在/usr/local/bin目录下输入redis-server redisconfig/redis.confredis性能测试命令 redis-benchmark [opt…

【WEEK14】 【DAY5】Swagger第三部分【中文版】

2024.5.31 Friday 接上文【WEEK14】 【DAY4】Swagger第二部分【中文版】 目录 16.6.配置API分组16.6.1.修改SwaggerConfig.java16.6.2.重启 16.7.实体配置16.7.1.新建pojo文件夹16.7.2.修改HelloController.java16.7.3.重启 16.8.常用注解16.8.1.Swagger的所有注解定义在io.swa…