预准备：表单组件

components/my-components/my-table.vue

@@ -0,0 +1,76 @@
+<template>
+	<view class="  table u-font-28">
+		<view class="u-flex u-row-between no-wrap title">
+			<slot name="title">
+				<view>
+					<my-radio @change="radioAllChange" v-model="allChecked" shape="square" :size="20"></my-radio>
+				</view>
+				<view>商品信息</view>
+				<view>规格</view>
+				<view>售价</view>
+				<view>销量/库存</view>
+				<view>分类名称</view>
+			</slot>
+		</view>
+		<view @click="changeChecked(item)" class="u-m-t-12 u-flex  u-p-24 u-row-between row"
+			v-for="(item,index) in list" :key="index">
+			<view class="">
+				<my-radio @change="radioChange($event,item)" v-model="item.checked" shape="square"
+					:size="20"></my-radio>
+			</view>
+			<view class="u-text-left u-flex-1 u-p-l-20">
+				<view class="">{{item.name}}</view>
+			</view>
+			<view class="u-flex-1 u-p-l-4 u-p-r-4 box-size-border">
+				{{item.typeEnum}}
+			</view>
+			<view class="u-flex-1">
+				￥{{ item.lowPrice }}
+			</view>
+			<view class="u-flex-1">
+				<!-- {{ item.realSalesNumber }}/{{ item.stockNumber }} -->
+				{{ item.stockNumber }}
+			</view>
+			<view class="u-flex-1">
+				{{item.categoryName}}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		reactive, ref
+	} from 'vue';
+	const props=defineProps({
+		list:{
+			type:Array,
+			default:()=>[]
+		}
+	})
+	let allChecked=ref(false)
+	const emits=defineEmits(['selectAllChange'])
+	function radioAllChange(e){
+		emits('selectAllChange')
+		console.log('selectAllChange');
+	}
+</script>
+
+<style lang="scss">
+	.table {
+		background: #F9F9F9;
+		border-radius: 8rpx;
+		overflow: hidden;
+
+		.title {
+			padding: 12rpx 24rpx 12rpx 24rpx;
+			background: #AEBAD2;
+			border-radius: 8rpx 8rpx 0rpx 0rpx;
+			color: #fff;
+		}
+
+		.row:nth-of-type(2n+1) {
+			background: #F0F0F0;
+		}
+	}
+</style>