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

Posted zhuangwei_8256

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uniapp 之 uni-table组件添加行点击事件相关的知识,希望对你有一定的参考价值。

  由于 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节点,可以考虑使用第二种方案试下。


如有不足,望大家多多指点! 谢谢!

以上是关于uniapp 之 uni-table组件添加行点击事件的主要内容,如果未能解决你的问题,请参考以下文章

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

uni-view标签里添加表格

uniapp的按钮为啥安卓端用不了

uniapp通过js唤起picker等组件 - 无需直接点击操作uniapp组件 - uniapp用JS点击某个DOM

uniapp自定义组件如何全局控制

为啥我uniapp能用div