表单新增一条数据和编辑数据弹窗问题

最近在写项目的时候,遇到一个问题,感觉场景挺常见的,就把它记录下来吧~如上图所示,点击新建数据和编辑,用的时同一个弹出框,这时候就会出现一个问题,当弹出框弹出时,要判断点击的是新增还是编辑,如果是新建,则数据为空(placeholder),如果是编辑,表单中要显示这条数据的信息。这在这里我用来是通过type来判断是新增还是编辑的,此时出现了一个问题,当我先点新增,再...
摘要由CSDN通过智能技术生成

最近在写项目的时候,遇到一个问题,感觉场景挺常见的,就把它记录下来吧~

 

 

如上图所示,点击新建数据和编辑,用的时同一个弹出框,这时候就会出现一个问题,当弹出框弹出时,要判断点击的是新增还是编辑,如果是新建,则数据为空(placeholder),如果是编辑,表单中要显示这条数据的信息。

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用uniapp的官方组件`uni-popup`来实现弹窗,同使用`uni-form`组件来实现表单。上传图片可以使用`uni.chooseImage`方法来选择图片并上传到服务器,上传数据可以使用`uni.request`方法发送数据到服务器。 以下是一个简单的示例代码: ``` <template> <view> <button @click="showPopup">打开弹窗</button> <uni-popup v-model="show" position="bottom"> <uni-form> <uni-form-item label="标题"> <uni-input v-model="title"></uni-input> </uni-form-item> <uni-form-item label="内容"> <uni-input v-model="content"></uni-input> </uni-form-item> <uni-form-item label="上传图片"> <button @click="chooseImage">选择图片</button> </uni-form-item> <uni-form-item> <button @click="submit">提交</button> </uni-form-item> </uni-form> </uni-popup> </view> </template> <script> export default { data() { return { show: false, title: '', content: '', images: [] } }, methods: { showPopup() { this.show = true }, chooseImage() { uni.chooseImage({ count: 1, success: (res) => { this.images = res.tempFilePaths } }) }, submit() { uni.request({ url: 'your_url', method: 'POST', data: { title: this.title, content: this.content, images: this.images }, success: (res) => { console.log(res) } }) } } } </script> ``` 在这个示例中,`uni-popup`组件作为一个弹窗容器,包含一个`uni-form`表单表单中包含了标题、内容、上传图片和提交按钮。当点击选择图片按钮,调用`uni.chooseImage`方法选择图片并将选择的图片路径存储在`images`数组中。当点击提交按钮,调用`uni.request`方法将表单数据和图片上传到服务器。你需要将`your_url`替换成你的服务器地址。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值