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

相关文章

JavaScript中的reduce方法执行过程、使用场景及进阶用法

《JavaScript中的reduce方法执行过程、使用场景及进阶用法》:本文主要介绍JavaScript中的reduce方法执行过程、使用场景及进阶用法的相关资料,reduce是JavaScri... 目录1. 什么是reduce2. reduce语法2.1 语法2.2 参数说明3. reduce执行过程

C#中读取XML文件的四种常用方法

《C#中读取XML文件的四种常用方法》Xml是Internet环境中跨平台的,依赖于内容的技术,是当前处理结构化文档信息的有力工具,下面我们就来看看C#中读取XML文件的方法都有哪些吧... 目录XML简介格式C#读取XML文件方法使用XmlDocument使用XmlTextReader/XmlTextWr

mybatis和mybatis-plus设置值为null不起作用问题及解决

《mybatis和mybatis-plus设置值为null不起作用问题及解决》Mybatis-Plus的FieldStrategy主要用于控制新增、更新和查询时对空值的处理策略,通过配置不同的策略类型... 目录MyBATis-plusFieldStrategy作用FieldStrategy类型每种策略的作

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

《Android悬浮窗开发示例((动态权限请求|前台服务和通知|悬浮窗创建)》本文介绍了Android悬浮窗的实现效果,包括动态权限请求、前台服务和通知的使用,悬浮窗权限需要动态申请并引导... 目录一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后

C++初始化数组的几种常见方法(简单易懂)

《C++初始化数组的几种常见方法(简单易懂)》本文介绍了C++中数组的初始化方法,包括一维数组和二维数组的初始化,以及用new动态初始化数组,在C++11及以上版本中,还提供了使用std::array... 目录1、初始化一维数组1.1、使用列表初始化(推荐方式)1.2、初始化部分列表1.3、使用std::

oracle DBMS_SQL.PARSE的使用方法和示例

《oracleDBMS_SQL.PARSE的使用方法和示例》DBMS_SQL是Oracle数据库中的一个强大包,用于动态构建和执行SQL语句,DBMS_SQL.PARSE过程解析SQL语句或PL/S... 目录语法示例注意事项DBMS_SQL 是 oracle 数据库中的一个强大包,它允许动态地构建和执行

Python Jupyter Notebook导包报错问题及解决

《PythonJupyterNotebook导包报错问题及解决》在conda环境中安装包后,JupyterNotebook导入时出现ImportError,可能是由于包版本不对应或版本太高,解决方... 目录问题解决方法重新安装Jupyter NoteBook 更改Kernel总结问题在conda上安装了

Goland debug失效详细解决步骤(合集)

《Golanddebug失效详细解决步骤(合集)》今天用Goland开发时,打断点,以debug方式运行,发现程序并没有断住,程序跳过了断点,直接运行结束,网上搜寻了大量文章,最后得以解决,特此在这... 目录Bug:Goland debug失效详细解决步骤【合集】情况一:Go或Goland架构不对情况二:

Ubuntu固定虚拟机ip地址的方法教程

《Ubuntu固定虚拟机ip地址的方法教程》本文详细介绍了如何在Ubuntu虚拟机中固定IP地址,包括检查和编辑`/etc/apt/sources.list`文件、更新网络配置文件以及使用Networ... 1、由于虚拟机网络是桥接,所以ip地址会不停地变化,接下来我们就讲述ip如何固定 2、如果apt安

解决jupyterLab打开后出现Config option `template_path`not recognized by `ExporterCollapsibleHeadings`问题

《解决jupyterLab打开后出现Configoption`template_path`notrecognizedby`ExporterCollapsibleHeadings`问题》在Ju... 目录jupyterLab打开后出现“templandroidate_path”相关问题这是 tensorflo