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

news/2024/7/10 2:52:11 标签: 前端, html, uni-app, vue
htmledit_views">

问题

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

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

解决方法

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

html"><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>

看代码

html"><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>


http://www.niftyadmin.cn/n/5140893.html

相关文章

【ELFK】之Filebeat

一、Filebeat介绍 1、Filebeat是什么&#xff1f; Filebeat适用于转发和集中数据的轻量级传送工具&#xff0c;Filebeat监视了指定的日志文件或位置&#xff0c;收集日志事件&#xff0c;并将他们转发到Elasticsearch或Logstash进行索引。 **Filebeat的工作方式&#xff1a;*…

springmvc 讲解(2)

系列文章目录 springmvc讲解&#xff08;1 &#xff09;点击此处即可 文章目录 系列文章目录一、Springmvc发送数据1、快速跳转页面1.1 开发模式讲解1.2 jsp简述1.3 页面跳转控制1.4 转发和重定向 2、返回json数据2.1 ResponseBody 注解2.2 RestController注解 3、访问静态资源…

QDialog实现圆角对话框的三种方式

方式一&#xff1a;通过QBitMap设置控件有效绘制区域&#xff08;缺点&#xff1a;容易产生锯齿&#xff0c;锯齿来自于QBitMap&#xff09; Dialog继承Qdialog设置无边框及背景透明this->setWindowFlags(Qt::FramelessWindowHint); //去除标题边框 this->setAttribute(Q…

shell基础回顾

0.vim命令 vim gg 移动到文档第一行 G 移动到文档最后一行 :set nu 显示行号 :set noun 取消行号 nG 移动到指定n行,例如20G $ 移动到行尾 0 移动到行头 clrtf 屏幕向下移动一页 clrtb 屏幕向上移动一页 :%sword1word2g 搜索文本&#xff…

呼吸灯【FPGA】

// module sleep_led // 模块名字&#xff0c;参数&#xff0c;方法体 #(parameter CNT_1US_MAX 6d49 ,parameter CNT_1MS_MAX 10d999 ,parameter CNT_1S_MAX 10d999 ) (input FPGA_CLK_50M_b5,input reset_e8,input key1_k18,input key2_n17,input key3_n18,inpu…

P2006 赵神牛的游戏 python解法

赵神牛的游戏 题目描述 在 DNF 中&#xff0c;赵神牛有一个缔造者&#xff0c;他一共有 k k k 点法力值&#xff0c;一共有 m m m 个技能&#xff0c;每个技能耗费的法力值为 a i a_i ai​&#xff0c;可以造成的伤害为 b i b_i bi​&#xff0c;而 boss 的体力值为 n n…

uniapp原生插件之乐橙摄像机播放插件(云台对讲版)

插件介绍 乐橙摄像机播放插件(云台对讲版)&#xff0c;集成视频播放&#xff0c;对讲模式、云台控制 插件地址 乐橙摄像机播放插件(云台对讲版) - DCloud 插件市场 超级福利 uniapp 插件购买超级福利 插件申请权限 麦克风权限&#xff08;可参考示例项目&#xff09;网…

小红书协议算法最新版

如果您想通过学习来了解小红书的点赞、关注、私信等功能的实现&#xff0c;以下是一些一般性的思路和示例代码&#xff0c;供您学习参考&#xff1a; 1. 点赞功能&#xff1a; - 后端实现&#xff1a;在后端&#xff0c;您可以创建一个用于存储用户点赞信息的数据库表。对于每…