Uniapp 之 uni-table组件设置行点击事件

Posted 2022-01-05 zhuangwei_8256

  由于 uniapp官网的uni-table组件 并没有给出设置行点击事件的events，于是自己想方法基于uni-table组件实现了表格行点击事件；

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

这里需要注意的是，不能在uniapp 自带的页面生命周期onLoad中使用，注意该生命周期的说明：

 
 

如有不足，望大家多多指点！ 谢谢！