商品分类下拉选择

src/views/canteen/canteenOnlineSpu/form.vue

@@ -14,10 +14,7 @@
 				</el-col>
 				<el-col :span="12" class="mb20">
 					<el-form-item label="商品分类" prop="categoryId">
-						<el-select v-model="form.categoryId" placeholder="请选择商品分类">
-							<el-option label="??" :value="0" />
-							<el-option label="??" :value="1" />
-						</el-select>
+						<select-ctcg v-model="form.categoryId" />
 					</el-form-item>
 				</el-col>
 				<el-col :span="12" class="mb20">
@@ -112,6 +109,7 @@ const form = reactive({
 // 定义校验规则
 const dataRules = ref({
 	merchantId: [{ required: true, message: '商户不能为空', trigger: 'blur' }],
+	categoryId: [{ required: true, message: '商品分类不能为空', trigger: 'blur' }],
 	name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }],
 	picUrl: [{ required: true, message: '商品封面图不能为空', trigger: 'blur' }],
 	price: [{ required: true, message: '商品价格', trigger: 'blur' }],

src/views/canteen/canteenOnlineSpu/index.vue

@@ -6,11 +6,8 @@
 					<el-form-item label="商品名称" prop="name">
 						<el-input placeholder="请输入商品名称" v-model="state.queryForm.name" />
 					</el-form-item>
-					<el-form-item label="商品分类编号" prop="categoryId">
-						<el-select v-model="state.queryForm.categoryId" placeholder="请选择商品分类编号">
-							<el-option label="??" :value="0" />
-							<el-option label="??" :value="1" />
-						</el-select>
+					<el-form-item label="商品分类" prop="categoryId">
+						<select-ctcg v-model="state.queryForm.categoryId" style="width: 200px" />
 					</el-form-item>
 					<el-form-item>
 						<el-button icon="search" type="primary" @click="getDataList">查询</el-button>