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>

### 实现 UniAppuni-table 组件的固定UniApp 的 `uni-table` 组件中设置固定可以通过特定属性来完成。对于希望固定的某一,可以利用 `fixed` 属性[^2]。 此属性接受字符串参数 `"left"` 或者 `"right"` 来指定该应该相对于表格左侧还是右侧保持静止。下面是一个简单的例子说明如何定义带有固定首的表格: ```html <template> <view> <!-- 表格 --> <uni-table border stripe emptyText="暂无更多数据"> <uni-tr> <uni-th width="100" fixed="left">编号</uni-th> <!-- 这里设置了固定左 --> <uni-th>姓名</uni-th> <uni-th>职位</uni-th> <uni-th>年龄</uni-th> <uni-th>地址</uni-th> <uni-th width="180" fixed="right">操作</uni-th> <!-- 同样这里设置了固定右 --> </uni-tr> <uni-tr v-for="(item,index) in tableData" :key="index"> <uni-td>{{ item.id }}</uni-td> <uni-td>{{ item.name }}</uni-td> <uni-td>{{ item.position }}</uni-td> <uni-td>{{ item.age }}</uni-td> <uni-td>{{ item.address }}</uni-td> <uni-td><button @click="handleClick(item)">编辑</button></uni-td> </uni-tr> </uni-table> </view> </template> <script> export default { data() { return { tableData: [ { id: '1', name: '张三', position: '前端工程师', age: '27', address: '北京市海淀区' }, // 更多的数据... ] }; }, methods: { handleClick(row){ console.log('编辑:', row); } } }; </script> ``` 上述代码片段展示了创建一个具有固定左边和右边栏目的表格的方法,在实际开发过程中可根据需求调整哪一为固定以及其宽度等样式特性。 #### 注意事项 当使用 `position:sticky` CSS 属性实现固定效果时需要注意不同浏览器的支持情况;不过在这里由于是通过框架自带的功能而非纯CSS方式达成目标,则无需过多考虑兼容性问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值