问题描述
本文记录用于记录使用
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>
方法一会使得表格得表头和表中得数据对不齐(每一行得数据宽度等于了表头的第一列)
解决方法二
将方法一中的<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
的论坛找信息时,发现一位网友(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
如有问题欢迎指正!文章来源地址https://www.toymoban.com/news/detail-618343.html
到了这里,关于uni-app中uni-table的uni-tr无点击事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!