关于uni-table没有行点击事件的问题
第一种方案(不改变导入的 tr 组件)
<uni-table border stripe emptyText="暂无更多数据" :loading="loading"> <!-- 表头行 --> <uni-tr> <uni-th align="center" width="50">姓名</uni-th> <uni-th align="center" width="50">年龄</uni-th> <uni-th align="center" width="50">地址</uni-th> </uni-tr> <!-- 表格数据行 --> <uni-tr v-for="item in tableData" :key="item.id"> <uni-td align="center">{{ item.name }}</uni-td> <uni-td align="center">{{ item.age }}</uni-td> <uni-td align="center">{{ item.address }}</uni-td> </uni-tr> </uni-table>
在mounted
生命周期里面找到行元素,并给每个行元素设置点击事件(表头行除外)
mounted() { let that = this; // 箭头函数的写法可省略这行代码 let trDoms = document.getElementsByClassName('uni-table-tr'); let len = trDoms.length; for(let i = 0; i < len; i++) { let item = trDoms[i]; // table为表格绑定的数据 // 表头行除外直接通过this.tableData[i - 1] 是否存在判断即可 if(this.tableData[i - 1]) { // 这里使用了箭头函数的写法,如果使用的function 的写法,请注意this的指向问题 item.onclick = () => { let row = this.tableData[i - 1]; this.getCurrentRow(row); }; // function 的写法: // item.onclick = function() { // let row = that.tableData[i - 1]; // that.getCurrentRow(row); // }; } } }, methods: { getCurrentRow(row) { console.log(row); } }
第二种方案(改变 tr 组件)
利用组件之间的通信
业务界面:
<uni-table border stripe emptyText="暂无更多数据" :loading="loading"> <!-- 表头行 --> <uni-tr> <uni-th align="center" width="50">姓名</uni-th> <uni-th align="center" width="50">年龄</uni-th> <uni-th align="center" width="50">地址</uni-th> </uni-tr> <!-- 表格数据行 --> <uni-tr v-for="item in tableData" :key="item.id" @row-click="rowclick(item)"> <uni-td align="center">{{ item.name }}</uni-td> <uni-td align="center">{{ item.age }}</uni-td> <uni-td align="center">{{ item.address }}</uni-td> </uni-tr> </uni-table>
methods: { rowclick(item) { console.log('item', item); } }
tr
组件界面中给uni-table-tr
定义一个 click
事件
<template> <view class="uni-table-tr" @click="getRow"> <checkbox-group v-if="selection === 'selection'" class="checkbox" :class="{'tr-table--border':border}" @change="change"> <label> <checkbox value="check" :checked="value"/> </label> </checkbox-group> <slot></slot> </view> </template>
然后在tr
组件中的 methods
中定义方法给父组件调用
methods: { getRow() { this.$emit("row-click") }, // 其他方法就不显示了 。 。 。 }
这里的代码测试环境是在H5
环境中,未能进行多端测试是否兼容的问题;
如果是小程序端,由于获取不到dom
节点,可以考虑使用第二种方案试下。