uni-app中uni-table的uni-tr无点击事件
uni-app中uni-table的uni-tr无点击事件
- 问题描述
- 解决方法一
- 解决方法二
- 解决方法三
问题描述
本文记录用于记录使用
uni-app开发过程遇到的bug。
在使用uni-table时，想给uni-table的行添加行点击事件；但发现官方并未给uni-tr增加点击行点击事件（很多事件都没有），这个问题很久就有人在其官方论坛提出，但官方一直没有解决。在csdn中找了一个类似的帖子，但本人能力有限也没有解决我的问题。
解决方法一
后来请教同事，说在
<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>
方法一会使得表格得表头和表中得数据对不齐（每一行得数据宽度等于了表头的第一列）
解决方法二
将方法一中的
相比于方法一，优点是表格的样式不变，缺点是代码凌乱复杂。
<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的论坛找信息时，发现一位网友（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>
总之，最优的解决方法应该是方法三。期望有人去改善官方文档
^_^ ！
如有问题欢迎指正！