2.2 KiB
2.2 KiB
实现店铺管理页面优化
需求分析
- 移除新增和编辑弹窗中的经纬度填写项
- 将省市区的输入框改为下拉选择组件，实现三级联动
- 确保编辑弹窗中省市区数据能正确回显
技术方案
1. 移除经纬度填写项
- 修改
shop.vue文件中的表单部分，删除经纬度相关的表单项 - 移除表单验证规则中的经纬度验证
- 确保在提交表单时不会传递经纬度数据
2. 实现省市区下拉选择
- 由于项目已使用Element Plus，我们可以实现一个三级联动的省市区选择组件
- 使用Element Plus的级联选择器(
el-cascader)实现省市区选择 - 准备省市区数据，支持三级联动
3. 实现编辑弹窗回显
- 在编辑店铺时，将后端返回的省市区数据转换为级联选择器所需的格式
- 确保级联选择器能正确回显已选择的省市区数据
- 实现数据转换逻辑，将级联选择器的输出转换为后端所需的格式
实现步骤
-
修改表单结构
- 移除
shop.vue中表单的经纬度输入项 - 将省市区的
el-input替换为el-cascader组件 - 调整表单布局，确保组件样式一致
- 移除
-
准备省市区数据
- 实现省市区数据的加载逻辑
- 确保数据格式符合Element Plus级联选择器的要求
-
实现联动和回显逻辑
- 实现级联选择器的基本功能
- 实现编辑时省市区数据的回显逻辑
- 实现数据转换，将级联选择器输出转换为后端所需格式
-
更新表单处理
- 更新表单验证规则
- 更新表单提交逻辑，确保省市区数据正确传递
- 更新编辑店铺时的数据填充逻辑
-
测试功能完整性
- 测试新增店铺功能，确保省市区选择正常
- 测试编辑店铺功能，确保省市区数据正确回显
- 测试表单提交，确保数据格式正确
预期效果
- 新增和编辑弹窗中不再显示经纬度输入项
- 省市区选择使用Element Plus级联选择器，支持三级联动
- 编辑弹窗中省市区数据能正确回显
- 表单提交时正确传递省市区数据
- 页面样式保持一致，交互流畅