template !-- 添加/编辑菜品页面容器:key用于强制重新渲染组件 -- div :keyvueRest classaddBrand-container !-- 内部容器:key用于强制重新渲染子元素 -- div :keyrestKey classcontainer !-- 表单组件绑定校验规则和数据模型inline为true表示行内布局 -- el-form refruleForm :modelruleForm :rulesrules :inlinetrue label-width180px classdemo-ruleForm !-- 第一行菜品名称和菜品分类 -- div !-- 菜品名称输入项必填最大长度20字符 -- el-form-item label菜品名称: propname el-input v-modelruleForm.name placeholder请填写菜品名称 maxlength20 / /el-form-item !-- 菜品分类选择项必填 -- el-form-item label菜品分类: propcategoryId el-select v-modelruleForm.categoryId placeholder请选择菜品分类 !-- 遍历dishList生成分类选项显示name值为id -- el-option v-for(item, index) in dishList :keyindex :labelitem.name :valueitem.id / /el-select /el-form-item /div !-- 第二行菜品价格 -- div el-form-item label菜品价格: propprice el-input v-modelruleForm.price placeholder请设置菜品价格 / /el-form-item /div !-- 口味做法配置区域这是一个复杂的自定义表单域 -- el-form-item label口味做法配置: el-form-item div classflavorBox !-- 当没有口味配置时显示添加口味按钮 -- span v-ifdishFlavors.length 0 classaddBut clickaddFlavore 添加口味/span !-- 当有口味配置时显示口味配置列表 -- div v-ifdishFlavors.length ! 0 classflavor !-- 口味配置表头 -- div classtitle span口味名3个字内/span !-- 口味标签说明已注释 -- /div !-- 口味配置内容区域 -- div classcont !-- 遍历口味列表每个口味一个配置项 -- div v-for(item, index) in dishFlavors :keyindex classitems !-- 口味名称选择/输入组件 -- div classitTit SelectInput :dish-flavors-dataleftDishFlavors :indexindex :valueitem.name selectselectHandle / /div !-- 口味标签列表已选中的具体口味值 -- div classlabItems styledisplay: flex !-- 遍历当前口味的所有标签值 -- span v-for(it, ind) in item.value :keyind {{ it }} !-- 删除标签按钮 -- i clickdelFlavorLabel(index, ind)X/i /span !-- 输入标签的容器可能用于添加新标签 -- div classinputBox :styleinputStyle / /div !-- 删除整个口味的按钮 -- span classdelFlavor delBut non clickdelFlavor(item.name)删除/span /div /div !-- 当还有可选口味且当前口味数小于总口味数时显示添加口味按钮 -- div v-if!!this.leftDishFlavors.length this.dishFlavors.length this.dishFlavorsData.length classaddBut clickaddFlavore 添加口味 /div /div /div /el-form-item /el-form-item !-- 菜品图片上传区域 -- div el-form-item label菜品图片: propimage !-- 自定义图片上传组件接收初始图片URL图片变化时触发imageChange事件 -- image-upload :prop-image-urlimageUrl imageChangeimageChange !-- 插槽内容图片上传的提示信息 -- 图片大小不超过2Mbr仅能上传 PNG JPEG JPG类型图片br建议上传200*200或300*300尺寸的图片 /image-upload /el-form-item /div !-- 菜品描述文本域 -- div classaddress el-form-item label菜品描述: propregion el-input v-modelruleForm.description typetextarea :rows3 maxlength200 placeholder菜品描述最长200字 / /el-form-item /div !-- 表单底部按钮区域 -- div classsubBox address !-- 取消按钮返回上一页 -- el-button click() $router.back() 取消 /el-button !-- 保存按钮提交表单 -- el-button typeprimary :class{ continue: actionType add } clicksubmitForm(ruleForm) 保存 /el-button !-- 保存并继续添加按钮仅在新增模式下显示保存后不清空表单继续添加 -- el-button v-ifactionType add typeprimary clicksubmitForm(ruleForm, goAnd) 保存并继续添加 /el-button /div /el-form /div /div /template script langts // 注意这里只提供了模板部分脚本部分未在问题中给出 // 但从模板中可以推断出以下数据和方法 export default { data() { return { vueRest: , // 用于强制重新渲染组件的key restKey: , // 用于强制重新渲染子元素的key ruleForm: { // 表单数据模型 name: , // 菜品名称 categoryId: , // 菜品分类ID price: , // 菜品价格 description: , // 菜品描述 image: // 菜品图片 }, rules: {}, // 表单校验规则 dishList: [], // 菜品分类列表 dishFlavors: [], // 菜品口味配置数组 dishFlavorsData: [], // 所有可选的口味数据 leftDishFlavors: [], // 剩余可选的口味未选中的 imageUrl: , // 菜品图片URL actionType: add, // 操作类型add新增update修改 inputStyle: {} // 输入框样式 } }, methods: { addFlavore() { // 添加新口味配置的方法 }, selectHandle(data) { // 选择口味时的处理方法 // 参数包含选中的口味信息 }, delFlavorLabel(flavorIndex, labelIndex) { // 删除口味中某个标签的方法 // flavorIndex: 口味索引labelIndex: 标签索引 }, delFlavor(flavorName) { // 删除整个口味的方法 // flavorName: 要删除的口味名称 }, imageChange(imageUrl) { // 图片上传变化时的处理方法 // imageUrl: 上传后的图片URL }, submitForm(formName, goAnd) { // 提交表单的方法 // formName: 表单ref名称 // goAnd: 是否保存并继续添加的标志 } } } /script
vue菜品新增
template !-- 添加/编辑菜品页面容器:key用于强制重新渲染组件 -- div :keyvueRest classaddBrand-container !-- 内部容器:key用于强制重新渲染子元素 -- div :keyrestKey classcontainer !-- 表单组件绑定校验规则和数据模型inline为true表示行内布局 -- el-form refruleForm :modelruleForm :rulesrules :inlinetrue label-width180px classdemo-ruleForm !-- 第一行菜品名称和菜品分类 -- div !-- 菜品名称输入项必填最大长度20字符 -- el-form-item label菜品名称: propname el-input v-modelruleForm.name placeholder请填写菜品名称 maxlength20 / /el-form-item !-- 菜品分类选择项必填 -- el-form-item label菜品分类: propcategoryId el-select v-modelruleForm.categoryId placeholder请选择菜品分类 !-- 遍历dishList生成分类选项显示name值为id -- el-option v-for(item, index) in dishList :keyindex :labelitem.name :valueitem.id / /el-select /el-form-item /div !-- 第二行菜品价格 -- div el-form-item label菜品价格: propprice el-input v-modelruleForm.price placeholder请设置菜品价格 / /el-form-item /div !-- 口味做法配置区域这是一个复杂的自定义表单域 -- el-form-item label口味做法配置: el-form-item div classflavorBox !-- 当没有口味配置时显示添加口味按钮 -- span v-ifdishFlavors.length 0 classaddBut clickaddFlavore 添加口味/span !-- 当有口味配置时显示口味配置列表 -- div v-ifdishFlavors.length ! 0 classflavor !-- 口味配置表头 -- div classtitle span口味名3个字内/span !-- 口味标签说明已注释 -- /div !-- 口味配置内容区域 -- div classcont !-- 遍历口味列表每个口味一个配置项 -- div v-for(item, index) in dishFlavors :keyindex classitems !-- 口味名称选择/输入组件 -- div classitTit SelectInput :dish-flavors-dataleftDishFlavors :indexindex :valueitem.name selectselectHandle / /div !-- 口味标签列表已选中的具体口味值 -- div classlabItems styledisplay: flex !-- 遍历当前口味的所有标签值 -- span v-for(it, ind) in item.value :keyind {{ it }} !-- 删除标签按钮 -- i clickdelFlavorLabel(index, ind)X/i /span !-- 输入标签的容器可能用于添加新标签 -- div classinputBox :styleinputStyle / /div !-- 删除整个口味的按钮 -- span classdelFlavor delBut non clickdelFlavor(item.name)删除/span /div /div !-- 当还有可选口味且当前口味数小于总口味数时显示添加口味按钮 -- div v-if!!this.leftDishFlavors.length this.dishFlavors.length this.dishFlavorsData.length classaddBut clickaddFlavore 添加口味 /div /div /div /el-form-item /el-form-item !-- 菜品图片上传区域 -- div el-form-item label菜品图片: propimage !-- 自定义图片上传组件接收初始图片URL图片变化时触发imageChange事件 -- image-upload :prop-image-urlimageUrl imageChangeimageChange !-- 插槽内容图片上传的提示信息 -- 图片大小不超过2Mbr仅能上传 PNG JPEG JPG类型图片br建议上传200*200或300*300尺寸的图片 /image-upload /el-form-item /div !-- 菜品描述文本域 -- div classaddress el-form-item label菜品描述: propregion el-input v-modelruleForm.description typetextarea :rows3 maxlength200 placeholder菜品描述最长200字 / /el-form-item /div !-- 表单底部按钮区域 -- div classsubBox address !-- 取消按钮返回上一页 -- el-button click() $router.back() 取消 /el-button !-- 保存按钮提交表单 -- el-button typeprimary :class{ continue: actionType add } clicksubmitForm(ruleForm) 保存 /el-button !-- 保存并继续添加按钮仅在新增模式下显示保存后不清空表单继续添加 -- el-button v-ifactionType add typeprimary clicksubmitForm(ruleForm, goAnd) 保存并继续添加 /el-button /div /el-form /div /div /template script langts // 注意这里只提供了模板部分脚本部分未在问题中给出 // 但从模板中可以推断出以下数据和方法 export default { data() { return { vueRest: , // 用于强制重新渲染组件的key restKey: , // 用于强制重新渲染子元素的key ruleForm: { // 表单数据模型 name: , // 菜品名称 categoryId: , // 菜品分类ID price: , // 菜品价格 description: , // 菜品描述 image: // 菜品图片 }, rules: {}, // 表单校验规则 dishList: [], // 菜品分类列表 dishFlavors: [], // 菜品口味配置数组 dishFlavorsData: [], // 所有可选的口味数据 leftDishFlavors: [], // 剩余可选的口味未选中的 imageUrl: , // 菜品图片URL actionType: add, // 操作类型add新增update修改 inputStyle: {} // 输入框样式 } }, methods: { addFlavore() { // 添加新口味配置的方法 }, selectHandle(data) { // 选择口味时的处理方法 // 参数包含选中的口味信息 }, delFlavorLabel(flavorIndex, labelIndex) { // 删除口味中某个标签的方法 // flavorIndex: 口味索引labelIndex: 标签索引 }, delFlavor(flavorName) { // 删除整个口味的方法 // flavorName: 要删除的口味名称 }, imageChange(imageUrl) { // 图片上传变化时的处理方法 // imageUrl: 上传后的图片URL }, submitForm(formName, goAnd) { // 提交表单的方法 // formName: 表单ref名称 // goAnd: 是否保存并继续添加的标志 } } } /script
