uni-table 中uni-td没有提供单元格点击事件的解决方法

最新推荐文章于 2024-03-20 11:22:32 发布

m0_62054189

最新推荐文章于 2024-03-20 11:22:32 发布

阅读量2.9k

点赞数 4

分类专栏： uniapp 文章标签：前端

本文链接：https://blog.csdn.net/m0_62054189/article/details/126052154

版权

uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.重写一个uni-td

增加@click="getRow"触发事件

getRow(){
this.$emit("row-click")

}

<template>
	<!-- #ifdef H5 -->
	<td @click="getRow" class="uni-table-td" :rowspan="rowspan" :colspan="colspan" :class="{'table--border':border}" :style="{width:width + 'px','text-align':align}">
		<slot></slot>
	</td>
	<!-- #endif -->
	<!-- #ifndef H5 -->
	<!-- :class="{'table--border':border}"  -->
	<view @click="getRow" class="uni-table-td" :class="{'table--border':border}" :style="{width:width + 'px','text-align':align}">
		<slot></slot>
	</view>
	<!-- #endif -->
	
</template>

<script>
	/**
	 * Td 单元格
	 * @description 表格中的标准单元格组件
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
	 * @property {Number} 	align = [left|center|right]	单元格对齐方式
	 */
	export default {
		name: 'uniTd',
		options: {
			virtualHost: true
		},
		props: {
			width: {
				type: [String, Number],
				default: ''
			},
			align: {
				type: String,
				default: 'left'
			},
			rowspan: {
				type: [Number,String],
				default: 1
			},
			colspan: {
					type: [Number,String],
				default: 1
			}
		},
		data() {
			return {
				border: false
			};
		},
		created() {
			this.root = this.getTable()
			this.border = this.root.border
		},
		methods: {
			getRow(){
				this.$emit("row-click")
			},
			/**
			 * 获取父元素实例
			 */
			getTable() {
				let parent = this.$parent;
				let parentName = parent.$options.name;
				while (parentName !== 'uniTable') {
					parent = parent.$parent;
					if (!parent) return false;
					parentName = parent.$options.name;
				}
				return parent;
			},
		}
	}
</script>

<style lang="scss">
	$border-color:#EBEEF5;

	.uni-table-td {
		display: table-cell;
		padding: 8px 10px;
		font-size: 14px;
		border-bottom: 1px $border-color solid;
		font-weight: 400;
		color: #606266;
		line-height: 23px;
		box-sizing: border-box;
	}

	.table--border {
		border-right: 1px $border-color solid;
	}
</style>

2. 需要增加触发的父级标签uni-tr中增加点击事件@click="getRow"
重写的uni-td的定义为tableTd，增加 @row-click=""

<uni-table ref="table" :loading="loading" :border="false" :stripe="false" type="" emptyText="暂无更多数据" style="border-radius: 8px;">
	<uni-tr style="background-color: #D2E2F9;color: #000;">
	  <uni-th width="20%" align="center" style="color: #000;">风险等级</uni-th>
	  <uni-th width="20%" align="center" style="color: #000;">重点事件</uni-th>
	  <uni-th width="20%" align="center" style="color: #000;">重点人</uni-th>
	  <uni-th width="20%" align="center" style="color: #000;">重点物品</uni-th>
	  <uni-th width="20%" align="center" style="color: #000;">重点场所</uni-th>
    </uni-tr>
	<uni-tr v-for="(item, index) in tableData" :key="index" @click="getRow">
		<tableTd align="center" :style="item.style"  style="min-width: 76px;">{{ item.level }}</tableTd>
		<tableTd align="center" style="min-width: 76px;" @row-click="handelTableNavTo('eventNum',item.level)">{{ item.eventNum }}</tableTd>
		<tableTd align="center" style="min-width: 76px;" @row-click="handelTableNavTo('personNum',item.level)">{{ item.personNum }}</tableTd>
		<tableTd align="center" style="min-width: 76px;" @row-click="handelTableNavTo('placeNum',item.level)">{{ item.placeNum }}</tableTd>
		<tableTd align="center" style="min-width: 76px;" @row-click="handelTableNavTo('goodsNum',item.level)">{{ item.goodsNum }}</tableTd>
		</uni-tr>
</uni-table>

import tableTd from '@/component/table-td.vue'