uniapp uni-table 表格封装 单选 多选 插槽 可复用等

<template>
	<view>
		<uni-table ref="table" :loading="loading" border stripe :type="type" emptyText="暂无更多数据"
			@selection-change="selectionChange">
			<uni-tr>
				<!-- single单选 -->
				<uni-th v-if="type =='single'" width="40" style="color: #fff;margin: auto;" align="center" />
				<uni-th v-for="(item, i) in columns" :key="i" :width="item.width"
					:align="item.align">{{item.title}}</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, i) in tableData" :key="i">
				<!-- single单选 -->
				<uni-td v-if="type =='single'" align="center">
					<view v-if="selectedIndex === i" @click="saveCombox(i)" :style="{
					background: '#007aff',
					width: '28rpx',
					height: '28rpx',
					position: 'relative',
					border: '1px solid #d1d1d1',
					margin: 'auto'
				}">
						<uni-icons color="#fff"
							style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
							v-if="selectedIndex === i" type="checkmarkempty" size="14" />
					</view>
					<view v-else @click="saveCombox(i)" :style="{
					background: 'none',
					width: '28rpx',
					height: '28rpx',
					position: 'relative',
					border: '1px solid #d1d1d1',
					margin: 'auto'
				}">
					</view>
				</uni-td>
				<uni-td v-for="(temp,i) in columns" :key="i" :style="{textAlign: temp.align}">
					<template v-if="temp.slot">
						<slot :name="temp.slot" :data="item"></slot>
					</template>
					<template v-else>
						<text>{{ item[temp.dataIndex] }}</text>
					</template>
				</uni-td>
			</uni-tr>
		</uni-table>
	</view>
</template>

export default {
		props: {
			type: {
				type: String,
				default: function() {
					return '' //selection 多选 single 单选
				}
			},
			columns: {
				type: Array,
				default: function() {
					return [{
						title: '姓名',
						align: 'center',
						width: 168,
						dataIndex: 'name',
						// slot  插槽
					}, {
						title: '年龄',
						align: 'center',
						width: 168,
						dataIndex: 'age'
					}, ]
				}
			},
			tableData: {
				type: Array,
				default: function() {
					return [{
						"name": "孟浩然",
						"age": "18"
					}, {
						"name": "王昌龄",
						"age": "22"
					}]
				}
			}
		},
		data() {
			return {
				loading: false,
				selectedIndex: '',
			}
		},
		methods: {
			// 多选
			selectionChange(e) {
				console.log(e)
			},
			// 单选
			saveCombox(e) {
				this.selectedIndex = e
				console.log(this.tableData[e])
				this.$emit('change', this.tableData[e])
			}
		}
	}

<style scoped lang="scss">
	/deep/ .uni-table-td {
		padding: 4px;
		font-size: 13px;
	}

	/deep/ .uni-table-th {
		background: #1989fa;
		color: #fff;
		font-size: 14px !important;
		font-weight: bold;
	}

	/deep/ .uni-table-tr:nth-child(1)>.checkbox {
		background: #1989fa;
	}
</style>

---

上面的只能用于H5端，
下面的可以在微信小程序和H5编译，但是由于小程序不支持动态插槽，就不是用的插槽方案

 
子组件

<template>
	<view>
		<uni-table ref="table" :loading="loading" border stripe :type="type" emptyText="暂无更多数据"
			@selection-change="selectionChange">
			<uni-tr>
				<!-- single单选 -->
				<uni-th v-if="type =='single'" width="40" style="color: #fff;margin: auto;" align="center" />
				<uni-th v-for="(item, i) in columns" :key="item.dataIndex" :width="item.width"
					:align="item.align">{{item.title}}</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, i) in tableData" :key="i">
				<!-- single单选 -->
				<uni-td v-if="type =='single'" align="center">
					<view v-if="selectedIndex === i" @click="saveCombox(i)" :style="{
					background: '#007aff',
					width: '28rpx',
					height: '28rpx',
					position: 'relative',
					border: '1px solid #d1d1d1',
					margin: 'auto'
				}">
						<uni-icons color="#fff"
							style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
							v-if="selectedIndex === i" type="checkmarkempty" size="14" />
					</view>
					<view v-else @click="saveCombox(i)" :style="{
					background: 'none',
					width: '28rpx',
					height: '28rpx',
					position: 'relative',
					border: '1px solid #d1d1d1',
					margin: 'auto'
				}">
					</view>
				</uni-td>
				<uni-td v-for="(temp,is) in columns" :key="is" :style="{textAlign: temp.align}">
					<!--自定义插槽 微信不可用 以json 格式来编译使用 -->
					<template v-if="temp.slot">
						<text v-for="(items,isi) in temp.renders " :key="isi" @click="detailsSave(items.function,i)"
							:style="[{color:items.color || ''}]">{{ items.name }}</text>
					</template>

					<template v-else-if="temp.filters">
						<text :style="[{color:temp.textColor[item[temp.dataIndex]] || ''}]">
							{{temp.filters[item[temp.dataIndex]] }}
						</text>
					</template>
					<template v-else>
						<text>{{ item[temp.dataIndex] }}</text>
					</template>



					<!-- 自定义动态插槽名 仅支持 H5 H5可以插槽 -->
					<!-- #ifdef H5 -->
					<!-- 			<template v-if="temp.slot">
						<slot :name="`tab-${temp.slot}`" :data="item" />
					</template>
					<template v-else-if="temp.filters">
						<text :style="{color:temp.textColor[item[temp.dataIndex]] || ''}">
							{{temp.filters[item[temp.dataIndex]] }}
						</text>
					</template>
					<template v-else>
						<text>{{ item[temp.dataIndex] }}</text>
					</template> -->
					<!-- #endif -->


				</uni-td>
			</uni-tr>
		</uni-table>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: function() {
					return '' //selection 多选 single 单选
				}
			},
			columns: {
				type: Array
			},
			tableData: {
				type: Array
			}
		},
		options: {
			dynamicSlots: true, // 启用动态 slot
			multipleSlots: true, // 启用动态 slot
		},
		data() {
			return {
				loading: false,
				selectedIndex: '',
			}
		},
		methods: {
			// 多选
			selectionChange(e) {
				console.log(e)
			},
			// 单选
			saveCombox(e) {
				this.selectedIndex = e
				console.log(this.tableData[e])
				this.$emit('change', this.tableData[e])
			},
			detailsSave(e, temp) {
				console.log(temp)
				console.log(e, this.tableData[temp])
				this.$emit(e, this.tableData[temp])
			}
		}
	}
</script>

父组件 引用

<Jtable :columns="columns" :tableData="tableData" type='' @handleDetail="handleDetail">

handleDetail//方法名 你自己命名就可以 
handleDetail(e){  <!-- e 就可以拿到当前点击的 列的整条数据-->}
{
		title: '错误信息',
		width: 44,
		align: 'center',
		slot: 'action',
		renders: [{
			name: '查看',
			color: '#1989FA',
			function: 'handleDetail'
		}]
}
//表头
columns: [{
		title: '检测类型名称',
		width: 58,
		align: 'center',
		dataIndex: 'name01'
		},
		{
		title: '检测结果',
		width: 45,
		align: 'center',
	    dataIndex: 'name04',
		filters: {
			0: '不通过',
			1: '通过'
		},
		textColor: {
			0: '#24A88F',
			1: '#E83544'
			}

		}, {
	    title: '错误信息',
			width: 44,
			align: 'center',
		    slot: 'action',
			renders: [{
				name: '查看',
				color: '#1989FA',
				function: 'handleDetail'
			}]
			}
	],
//数据
tableData: [{
    	"id": 0,
	    "name01": "生产班次结单检测",
	    "name04": 1,
    },
    {
	    "id": 1,
    	"name01": "生产班次结单检测",
    	"name04": 0
    }
]