uni-app中uni-table的uni-tr无点击事件

这篇具有很好参考价值的文章主要介绍了uni-app中uni-table的uni-tr无点击事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题描述

本文记录用于记录使用uni-app开发过程遇到的bug。

在使用uni-table时,想给uni-table的行添加行点击事件;但发现官方并未给uni-tr增加点击行点击事件(很多事件都没有),这个问题很久就有人在其官方论坛提出,但官方一直没有解决。在csdn中找了一个类似的帖子,但本人能力有限也没有解决我的问题。

解决方法一

后来请教同事,说在<uni-tr>外面包裹一层<view>,但这样样式会改变,如下图所示。(后来在uni-app的论坛的回答也看到类似的方法)。

<template>
	<view>
	<!-- 表头数据 -->
		<uni-tr>
			<uni-th>物品类型</uni-th>
			<uni-th>数量</uni-th>
			<uni-th>单价</uni-th>
			<uni-th>金额</uni-th>
		</uni-tr>
		
		<!-- 每行数据 -->
		<view v-for="(item,index) in commodityList" :key="index" @click="trClick(index)">
			<uni-tr>
				<uni-td>{{item.name}}</uni-td>
				<uni-td>{{item.count}}</uni-td>
				<uni-td>{{item.price}}</uni-td>
				<uni-td>{{item.totalPrice}}</uni-td>
			</uni-tr>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commodityList: [ //商品信息
					{
						name: "商品A",
						count: 100,
						price: 10.00,
						totalPrice: 1000.00,
					},
					{
						name: "商品B",
						count: 32,
						price: 11.00,
						totalPrice: 352.00,
					}, {
						name: "商品C",
						count: 10,
						price: 1.61,
						totalPrice: 16.10,
					},
				]
			}
		},
		methods: {
			trClick(row) {
				console.log(`"点击了${row}行"`)
			},
		}
	}
</script>

uni-app中uni-table的uni-tr无点击事件,uni-app,javascript,前端
方法一会使得表格得表头和表中得数据对不齐(每一行得数据宽度等于了表头的第一列)

解决方法二

将方法一中的<view></view>放到<uni-td>标签里面,绑定相同的事件(如果想实现点击单元格触发不同的事件就可以定义不同的方法)。
相比于方法一,优点是表格的样式不变,缺点是代码凌乱复杂。

<template>
	<view>
		<!-- 表头数据 -->
		<uni-tr>
			<uni-th>物品类型</uni-th>
			<uni-th>数量</uni-th>
			<uni-th>单价</uni-th>
			<uni-th>金额</uni-th>
		</uni-tr>
		
		<!-- 每行数据 -->
		<uni-tr v-for="(item,index) in commodityList" :key="index">
			<uni-td>
				<view @click="trClick(index)">{{item.name}}</view>
			</uni-td>
			<uni-td>
				<view @click="trClick(index)">{{item.count}}</view>
			</uni-td>
			<uni-td>
				<view @click="trClick(index)">{{item.price}}</view>
			</uni-td>
			<uni-td>
				<view @click="trClick(index)">{{item.totalPrice}}</view>
			</uni-td>
		</uni-tr>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commodityList: [ //商品信息
					{
						name: "商品A",
						count: 100,
						price: 10.00,
						totalPrice: 1000.00,
					},
					{
						name: "商品B",
						count: 32,
						price: 11.00,
						totalPrice: 352.00,
					}, {
						name: "商品C",
						count: 10,
						price: 1.61,
						totalPrice: 16.10,
					},
				]
			}
		},
		methods: {
			trClick(row) {
				console.log(`"点击了${row}行"`)
			},
		}
	}
</script>

uni-app中uni-table的uni-tr无点击事件,uni-app,javascript,前端uni-app中uni-table的uni-tr无点击事件,uni-app,javascript,前端

解决方法三

有时开发就是那么“山重水复疑无路”,等方法二觉得是自己最后的无奈的选择时。笔者在写这篇文章时,为了信息的准确和完整,再去uni-app的论坛找信息时,发现一位网友(yeyuwenling)在2023-07-20提供了一个解决方法。使用@click.native(官方文档没写,直接@click或者change没用)。
尝试了之后,开始思考人生了!!!我记得自己试了uni-app论坛所有关于这个问题的方法啊!或许是自己眼高手低,看到@click就以为@click.native肯定不行,或者自己在写函数时又写了bug吧。

<template>
	<view>
		<!-- 表头数据 -->
		<uni-tr>
			<uni-th>物品类型</uni-th>
			<uni-th>数量</uni-th>
			<uni-th>单价</uni-th>
			<uni-th>金额</uni-th>
		</uni-tr>
		
		<!-- 每行数据 -->
		<uni-tr v-for="(item,index) in commodityList" :key="index" @click.native="trClick(index)">
			<uni-td>{{item.name}}</uni-td>
			<uni-td>{{item.count}}</uni-td>
			<uni-td>{{item.price}}</uni-td>
			<uni-td>{{item.totalPrice}}</uni-td>
		</uni-tr>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commodityList: [ //商品信息
					{
						name: "商品A",
						count: 100,
						price: 10.00,
						totalPrice: 1000.00,
					},
					{
						name: "商品B",
						count: 32,
						price: 11.00,
						totalPrice: 352.00,
					}, {
						name: "商品C",
						count: 10,
						price: 1.61,
						totalPrice: 16.10,
					},
				]
			}
		},
		methods: {
			trClick(row) {
				console.log(`"点击了${row}行"`)
			},
		}
	}
</script>

总之,最优的解决方法应该是方法三。期望有人去改善官方文档
^_^ !

如有问题欢迎指正!文章来源地址https://www.toymoban.com/news/detail-618343.html

到了这里,关于uni-app中uni-table的uni-tr无点击事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app---- 点击按钮拨打电话功能&&点击按钮调用高德地图进行导航的功能【安卓app端】

    先上效果图: 1. 在封装方法的文件夹下新建一个js文件,然后把这些功能进行封装 2.在需要的页面中进行调用 注意点: 1. 拨打电话需要进行app权限配置,设置完成后可以在正式版看到效果。(这几个最好都勾选上) 2. 配置高德地图的app模块设置,这里的appkey需要到高德地图

    2024年02月05日
    浏览(73)
  • uni-app+uView实现点击查看大图片的效果

    参数说明

    2024年02月10日
    浏览(48)
  • uni-app开发小程序,radio单选按钮,点击可以选中,再次点击可以取消

    不适用官方的change方法,自己定义点击方法。 动态判断定义的值是否等于遍历的值进行回显,如果和上一次点击的值一样,就把定义的值改为null

    2024年02月11日
    浏览(59)
  • uni-app 点击蒙版层时关闭自定义弹窗

    @click.stop:用于阻止冒泡 @click.stop 标签范围内,点击任何区域(包括 @click 点击事件)都不会关闭弹窗。标签范围外会关闭弹窗 @click.stop 标签内的 @click 等事件:如果事件内有关闭弹窗的代码可关闭弹窗 在 template 中 在 script 中 toMoveHandle 方法请查看:uniapp 禁止遮罩层下的页面滚

    2024年02月07日
    浏览(48)
  • uni-app实现点击显示隐藏列表,兼容微信小程序

    效果:    小程序打印的结果:值一直为true   如果你试过v-if不生效,又试了v-show,还是不行!!千万不要着急! 不是自己写的不对,而是uni-app和微信小程序修改值的方式不一致造成的。反正就是不承认是自己的问题。 其实解决的办法也很简单,就是要兼容两端,写出符合

    2024年02月09日
    浏览(65)
  • uni-app:监听数据变化(watch监听、@input事件)

    方法一:文本框监听,使用 @input 事件 方法二:使用watch监听属性(很好解决了文本框中数据非手输时监听不到数据变化)

    2024年02月10日
    浏览(45)
  • uni-app的tabBar用法(自动、点击刷新页面,loading加载框)

    一.先在package.json中配置tabBar(前置条件) tabBar所跳转的页面应事先在page中创建好!如下配置后app下方会有可点击的tabBar按钮,在list中设置按钮的个数。  图1         tabBar的 list 属性         text :tabBar按钮的名称         pagePath :tabBar按钮的page页面路径         iconPa

    2024年02月08日
    浏览(49)
  • 基于uni-app的微信小程序Map事件穿透处理

    业务需要在微信小程序中使用地图组件,上面需要有点位及点位的交互,同时地图上也会有一些悬浮的按钮、弹窗之类的。在微信小程序2.8.x的版本之后,地图这种原生组件是支持同层渲染的,也就是可以通过样式控制层级。在开发者工具中表现正常,但是上了真机后会发现点

    2024年02月11日
    浏览(58)
  • uni-app微信小程序多种分享事件监听并带参数

    监听用户点击右上角菜单的「复制链接」按钮时触发的事件。 *query:字符串string类型 ‘a=1b=2’ *

    2024年02月15日
    浏览(78)
  • 【RuoYi移动端】uni-app中的单击和双击事件

     @click=\\\"enterpriseSelect\\\"  @touchend=\\\"userinfo\\\"

    2024年02月08日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包