uniapp之unitable组件添加行点击事件

uniapp 之 uni-table组件添加行点击事件

• • 第一种方案&＃xff08;不改变导入的 tr 组件&＃xff09;
  • 第二种方案&＃xff08;改变 tr 组件&＃xff09;
  • 写在末尾

由于 uniapp官网的uni-table组件 并没有给出添加行点击事件的events&＃xff0c;于是自己想方法基于uni-table组件实现了表格行点击事件&＃xff1b;

第一种方案&＃xff08;不改变导入的 tr 组件&＃xff09;

姓名年龄地址{{ item.name }}{{ item.age }}{{ item.address }}



在mounted 生命周期里面找到行元素&＃xff0c;并给每个行元素设置点击事件&＃xff08;表头行除外&＃xff09;

mounted() {let that &＃61; this; // 箭头函数的写法可省略这行代码let trDoms &＃61; document.getElementsByClassName(&＃39;uni-table-tr&＃39;);let len &＃61; trDoms.length;for(let i &＃61; 0; i {let row &＃61; this.tableData[i - 1];this.getCurrentRow(row);};// function 的写法&＃xff1a;// item.onclick &＃61; function() {// let row &＃61; that.tableData[i - 1];// that.getCurrentRow(row);// };}}
},
methods: {getCurrentRow(row) {console.log(row);}
}


这里需要注意的是&＃xff0c;不能在uniapp 自带的页面生命周期onLoad中使用&＃xff0c;注意该生命周期的说明&＃xff1a;

第二种方案&＃xff08;改变 tr 组件&＃xff09;

利用组件之间的通信

业务界面&＃xff1a;

姓名年龄地址{{ item.name }}{{ item.age }}{{ item.address }}
methods: {rowclick(item) {console.log(&＃39;item&＃39;, item);}
}


tr 组件界面中给uni-table-tr定义一个 click 事件

然后在tr组件中的 methods中定义方法给父组件调用

methods: {getRow() {this.$emit("row-click")},// 其他方法就不显示了。。。
}


完美实现&＃xff01;

写在末尾

这里的代码测试环境是在H5环境中&＃xff0c;未能进行多端测试是否兼容的问题&＃xff1b;
如果是小程序端&＃xff0c;由于获取不到dom节点&＃xff0c;可以考虑使用第二种方案试下。

如有不足&＃xff0c;望大家多多指点&＃xff01; 谢谢&＃xff01;