uni-table动态列设置列宽不生效的解决方法

2023-11-02 04:20

本文主要是介绍uni-table动态列设置列宽不生效的解决方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

问题

uni-th 在这边是不固定的列数的,即dataList会变

在uni-th 设置固定列宽width='200',或者在uni-td 设置不生效,宽度不对

解决方法

在uni-td里面多包一层view,通过设置view的宽度来撑开uni-td

<uni-td v-for="(item,index) in dataList"><view style="width: 150px;"><uni-easyinput type="number" v-model="item.pull" @input="numberFixedDigit($event,index)"></uni-easyinput></view>
</uni-td>

看代码

<uni-table  border stripe emptyText="暂无更多数据"><uni-tr><uni-th align="center">表头1</uni-th><uni-th width="200" v-for="item in dataList"><text class="th-Font-big">{{item.eur}}</text></uni-th></uni-tr><uni-tr><uni-td align="center">表头2</uni-td><uni-td v-for="item in dataList">{{item.total}}</uni-td></uni-tr><uni-tr><uni-td align="center">表头3</uni-td><uni-td v-for="item in dataList"><text class="text-red">{{item.total-item.all}}</text></uni-td></uni-tr><uni-tr><uni-td align="center">表头4</uni-td><uni-td v-for="item in dataList">{{item.before}}</uni-td></uni-tr><uni-tr><uni-td align="center">表头5</uni-td><uni-td v-for="item in dataList">{{item.today}}</uni-td></uni-tr><uni-tr><uni-td align="center"><picker mode="date" :value="dates" @change="bindDateChange"><view class="uni-input" style="width: 200px;">日期:{{dates}}</view></picker></uni-td><uni-td v-for="(item,index) in dataList"><view style="width: 150px;"><uni-easyinput type="number" v-model="item.pull" @input="numberFixedDigit($event,index)"></uni-easyinput></view></uni-td></uni-tr>
</uni-table>

这篇关于uni-table动态列设置列宽不生效的解决方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/328066

相关文章

SpringBoot中使用Flux实现流式返回的方法小结

《SpringBoot中使用Flux实现流式返回的方法小结》文章介绍流式返回(StreamingResponse)在SpringBoot中通过Flux实现,优势包括提升用户体验、降低内存消耗、支持长连... 目录背景流式返回的核心概念与优势1. 提升用户体验2. 降低内存消耗3. 支持长连接与实时通信在Sp

Conda虚拟环境的复制和迁移的四种方法实现

《Conda虚拟环境的复制和迁移的四种方法实现》本文主要介绍了Conda虚拟环境的复制和迁移的四种方法实现,包括requirements.txt,environment.yml,conda-pack,... 目录在本机复制Conda虚拟环境相同操作系统之间复制环境方法一:requirements.txt方法

Nginx 重写与重定向配置方法

《Nginx重写与重定向配置方法》Nginx重写与重定向区别:重写修改路径(客户端无感知),重定向跳转新URL(客户端感知),try_files检查文件/目录存在性,return301直接返回永久重... 目录一.try_files指令二.return指令三.rewrite指令区分重写与重定向重写: 请求

MySQL 打开binlog日志的方法及注意事项

《MySQL打开binlog日志的方法及注意事项》本文给大家介绍MySQL打开binlog日志的方法及注意事项,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录一、默认状态二、如何检查 binlog 状态三、如何开启 binlog3.1 临时开启(重启后失效)

Nginx 配置跨域的实现及常见问题解决

《Nginx配置跨域的实现及常见问题解决》本文主要介绍了Nginx配置跨域的实现及常见问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来... 目录1. 跨域1.1 同源策略1.2 跨域资源共享(CORS)2. Nginx 配置跨域的场景2.1

Python中提取文件名扩展名的多种方法实现

《Python中提取文件名扩展名的多种方法实现》在Python编程中,经常会遇到需要从文件名中提取扩展名的场景,Python提供了多种方法来实现这一功能,不同方法适用于不同的场景和需求,包括os.pa... 目录技术背景实现步骤方法一:使用os.path.splitext方法二:使用pathlib模块方法三

Python打印对象所有属性和值的方法小结

《Python打印对象所有属性和值的方法小结》在Python开发过程中,调试代码时经常需要查看对象的当前状态,也就是对象的所有属性和对应的值,然而,Python并没有像PHP的print_r那样直接提... 目录python中打印对象所有属性和值的方法实现步骤1. 使用vars()和pprint()2. 使

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中,我们经常需要让某个元素占据容器的剩余空间,本文将介绍5种不同的方法来实现这个需求,并分析各种方法的优缺点,感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中,我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求

PostgreSQL 默认隔离级别的设置

《PostgreSQL默认隔离级别的设置》PostgreSQL的默认事务隔离级别是读已提交,这是其事务处理系统的基础行为模式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一 默认隔离级别概述1.1 默认设置1.2 各版本一致性二 读已提交的特性2.1 行为特征2.2

一文详解MySQL如何设置自动备份任务

《一文详解MySQL如何设置自动备份任务》设置自动备份任务可以确保你的数据库定期备份,防止数据丢失,下面我们就来详细介绍一下如何使用Bash脚本和Cron任务在Linux系统上设置MySQL数据库的自... 目录1. 编写备份脚本1.1 创建并编辑备份脚本1.2 给予脚本执行权限2. 设置 Cron 任务2