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

相关文章

macOS无效Launchpad图标轻松删除的4 种实用方法

《macOS无效Launchpad图标轻松删除的4种实用方法》mac中不在appstore上下载的应用经常在删除后它的图标还残留在launchpad中,并且长按图标也不会出现删除符号,下面解决这个问... 在 MACOS 上,Launchpad(也就是「启动台」)是一个便捷的 App 启动工具。但有时候,应

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很

Spring事务中@Transactional注解不生效的原因分析与解决

《Spring事务中@Transactional注解不生效的原因分析与解决》在Spring框架中,@Transactional注解是管理数据库事务的核心方式,本文将深入分析事务自调用的底层原理,解释为... 目录1. 引言2. 事务自调用问题重现2.1 示例代码2.2 问题现象3. 为什么事务自调用会失效3

mysql出现ERROR 2003 (HY000): Can‘t connect to MySQL server on ‘localhost‘ (10061)的解决方法

《mysql出现ERROR2003(HY000):Can‘tconnecttoMySQLserveron‘localhost‘(10061)的解决方法》本文主要介绍了mysql出现... 目录前言:第一步:第二步:第三步:总结:前言:当你想通过命令窗口想打开mysql时候发现提http://www.cpp

Mysql删除几亿条数据表中的部分数据的方法实现

《Mysql删除几亿条数据表中的部分数据的方法实现》在MySQL中删除一个大表中的数据时,需要特别注意操作的性能和对系统的影响,本文主要介绍了Mysql删除几亿条数据表中的部分数据的方法实现,具有一定... 目录1、需求2、方案1. 使用 DELETE 语句分批删除2. 使用 INPLACE ALTER T

MySQL INSERT语句实现当记录不存在时插入的几种方法

《MySQLINSERT语句实现当记录不存在时插入的几种方法》MySQL的INSERT语句是用于向数据库表中插入新记录的关键命令,下面:本文主要介绍MySQLINSERT语句实现当记录不存在时... 目录使用 INSERT IGNORE使用 ON DUPLICATE KEY UPDATE使用 REPLACE

SpringBoot启动报错的11个高频问题排查与解决终极指南

《SpringBoot启动报错的11个高频问题排查与解决终极指南》这篇文章主要为大家详细介绍了SpringBoot启动报错的11个高频问题的排查与解决,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一... 目录1. 依赖冲突:NoSuchMethodError 的终极解法2. Bean注入失败:No qu

PyCharm如何设置新建文件默认为LF换行符

《PyCharm如何设置新建文件默认为LF换行符》:本文主要介绍PyCharm如何设置新建文件默认为LF换行符问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录PyCharm设置新建文件默认为LF换行符设置换行符修改换行符总结PyCharm设置新建文件默认为LF

springboot报错Invalid bound statement (not found)的解决

《springboot报错Invalidboundstatement(notfound)的解决》本文主要介绍了springboot报错Invalidboundstatement(not... 目录一. 问题描述二.解决问题三. 添加配置项 四.其他的解决方案4.1 Mapper 接口与 XML 文件不匹配