封装uniapp-uni-table组件，（其中按钮利用插槽自定义插入）获取点击行事件，可传入自定义表头，传入后端数据，获取多选数据（其中行点击事件只有H5端可以用）附有完整代码

实现效果👇

table组件说明

表格内部的按钮，利用了作用域插槽，实现组件中数据向引用组件进行传值从而获取行内数据

table组件👇 其中定义slot插槽 ，

表格上方的按钮插槽名outSideBtn，表格内部的按钮插槽名bodyIndex

<template>
	<view>
		<slot v-if="tableParam.outSideBtn"  name="outSideBtn" ></slot>
		<uni-table ref="table" :loading="tableParam.loading" border  :type="tableParam.type" emptyText="暂无更多数据"
			@selection-change="selectionChange">
			<uni-tr>
				<uni-th v-for="(head,index1) in tableParam.header" :key="index1+'header'" align="center"
					:width="head.width">{{head.text}}</uni-th>
				<uni-th align="center" width="110" v-if="tableParam.operate">操作</uni-th>
			</uni-tr>
			<uni-tr v-for="(body,index) in tableParam.body" :key="index+'body'">
				<uni-td align="center" v-for="(head2,index2) in tableParam.header" :key="index2">
					<span class="bodyText">{{body[head2.value]}}</span>
				</uni-td>
				<view v-if="tableParam.operate" style="position: relative;">
					<uni-td align="center" width="150">
						<slot  name="bodyIndex" :row="{body,index}"></slot>
					</uni-td>
				</view>
			</uni-tr>
		</uni-table>
	</view>
</template>
 
<script>
	export default {
		/**
		 * @property {Object} tableParam 表格
		 * @event {Function} getCurrentRow(i,row) 获取行索引以及事件
		 * @event {Function} selectionChange 获取复选框选中的值
		 * @event {Function} returnParams 返回表格所有数据
		 */
		name:"simpleTable",
		props: {
			tableParam: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				index: -1,
			}
		},
		watch: {
			'tableParam.body': {
				handler(newVal, oldVal) {
					this.$nextTick(()=>{
						let trDoms = document.getElementsByClassName('uni-table-tr');
						let len = trDoms.length;
						if(len>1){
							for (let i = 1; i < len+1; i++) {
								let item = trDoms[i];
								if (this.tableParam.body[i-1]) {
									item.onclick = () => {
										let row = this.tableParam.body[i-1];
										this.getCurrentRow(i-1,row);
									}
							
								}
							}
						}
					})
				},
				deep: true,
		
			}
		},
		mounted() {
		},
		methods: {
			getCurrentRow(rowIndex,row) {
				this.$emit("getCurrentRow",rowIndex,row)
			},
			selectionChange(e) { // 获取复选框选中的值
				let indexs = e.detail.index;
				let datas = this.tableParam.body;
				if (indexs.length) {
					let newAry = [];
					for (let items of indexs) {
						newAry.push(datas[items]);
					}
					this.selectDatas = newAry;
				} else {
					this.selectDatas = [];
				}
				this.$emit("getMultipleSelection", this.selectDatas); //获取多选框选中
				// console.log(e.detail.index, this.selectDatas);
			},
			returnParams() {
				return this.tableParam.body; //返回表格所有数据
			}
 
		}
 
	}
</script>
 
<style lang="scss" scoped>
	.table {
		padding-top: 100rpx;
		background-color: #fdfdffff;
		width: 100%;
		height: 100%;
 
		.addFreight {
			text-align: right;
		}
 
		.bodyText {
			display: inline-block;
			width: 80%;
		}

	}
 

</style>

实际使用👇

1.template

<template>
	<view class="table">

		<view class="project-item-content">
			<view class="project-item-title">test</view>
			<button type="primary" @click="getAllTableData">getAllDatas</button>
			<fy-table ref="table" @getMultipleSelection="getMultipleSelection" :tableParam="tableParam"
				@getCurrentRow="getCurrentRow">
				<template v-slot:outSideBtn>
					<button class="addBtn" @click.stop="addTable()">新增</button>
				</template>
				<template v-slot:bodyIndex="scope">
					<span class="tdSpan" @click.stop="editTable(scope.row)">修改</span>
					<span class="tdSpan" @click.stop="delTable(scope.row)">删除</span>
				</template>
			</fy-table>
		</view>

	</view>
</template>

2.data

		data() {
			return {
				tableParam: {
					type: "selection", //是否可以多选
					loading: false, //加载状态
					operate: true, //是否显示操作区域
					outSideBtn: true, //是否显示新增
					header: [{ //表头
						width: 90,
						text: "位置",
						value: "local",

					}, {
						width: 80,
						text: "评分",
						value: "score",
					}],
					body: [], //后端的数据
				},
				selectDatas: [], //复选框选中的值
			}
		},

3.js

		onLoad(options) {
			setTimeout(() => {
				this.tableParam.body = [{ //模拟后端数据
						local: "S1",
						other: "1",
						score: 111,
						id: 1,
					},
					{
						local: "S2",
						other: "2",
						score: 222,
						id: 2
					},
				]
			}, 1000)
		},
		methods: {
			getCurrentRow(i, row) {
				console.log("获取当前行索引", i)
				console.log("获取当前行索=数据", row)
			},
			addTable(tableLength) {
				console.log("新增")
			},
			editTable(row) {
				console.log("编辑的这一行数据row", row.body)

			},
			delTable(row) {
				console.log("删除的这一行的索引index", row.index)
			},
			getMultipleSelection(selectDatas) {
				console.log("复选框选中的数据selectDatas", selectDatas)
				this.selectDatas = selectDatas
			},
			getAllTableData() {
				let self = this
				this.$nextTick(() => {
					console.log('从父组件获取table数据', self.$refs.table.returnParams())
				})

			}
		},