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

 

posted on 2022-12-27 10:21  SE7EN_96  阅读(623)  评论(0编辑  收藏  举报

导航