uni-table 行无法添加点击事件的解决办法

原创已于 2025-03-19 14:55:18 修改 · 898 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2024-03-14 10:35:30 首次发布

日常记录专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用SFSaver,JSZip和SQrcodeJS2库实现批量生成企业信息二维码图片，并将其打包成压缩包下载。针对大数据量的情况，文中还给出了优化建议。

uni-table 行无法添加点击事件的解决办法

使用 @click.native 绑定事件，经测试在真机及小程序都管用。

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