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

Posted 2022-01-31 zhuangwei_8256

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

• • 第一种方案（不改变导入的 tr 组件）
  • 第二种方案（改变 tr 组件）
  • 写在末尾

  由于 uniapp官网的uni-table组件 并没有给出添加行点击事件的events，于是自己想方法基于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);
	

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

 
 

第二种方案（改变 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节点，可以考虑使用第二种方案试下。

 
 

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