android开发实战 WEB视频自适应 机器学习 web开发 Netty 矿工文档 delphi events sed concurrency base64 vue添加class 手机banner常用尺寸 查看oracle连接数 matlab对数函数 mysql更新多个字段 ubuntu显示隐藏文件夹 mysql卸载工具 Navicat python循环 pythonlist python3下载安装 python字典get python创建txt文件并写入 python获取输入 java正则替换 java匿名函数 javasocket java可变参数 java命令 修改mac地址软件 c语言代码表白 淘宝自动发货软件 司司网吧 微信小程序源代码 小米9截屏 pr抖动特效 pro换肤 0000008e maplesim
当前位置: 首页 > 学习教程  > 编程语言

实习生活day6-8

2020/11/4 13:54:41 文章标签:

Day6摸鱼日记 摸鱼日记 肯德基-地铁-公司-摸鱼(停电了好久。。)-睡觉-拉屎-回家 需求: 点编辑时回传项目值(图中星汇云山花园)这个框框是单选下拉框(可搜索,这个简单加filterable“true”&…

Day6摸鱼日记

摸鱼日记
肯德基-地铁-公司-摸鱼(停电了好久。。)-睡觉-拉屎-回家
需求
点编辑时回传项目值(图中星汇云山花园)这个框框是单选下拉框(可搜索,这个简单加filterable=“true”)
数据从这个接口SVC_TaskDetailController.getProject()获取(第二张图),然后保存要正常!!!
编辑保存时 传参名:projectId (对应SVC_TaskDetailController.getProject()返回的id字段)
在这里插入图片描述
接口信息
在这里插入图片描述
首先打开模板区加个框咯~顺便说下项目原因,:用is代替
模板代码:

<el-col isspan="12">
              <el-form-item label="受理项目">
                <el-select v-model="repairEditForm.project" placeholder="" size="mini" isfilterable="true">
                  <el-option v-for="(item,index) in projectList" iskey="index" isvalue="item.id" islabel="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

然后数据区定义下数据
数据代码:

repairEditForm: {
          subject: '',
         //此处省略其他数据(巨多)
          projectId:'',
          project:''
        },
projectList: [],      //项目列表

回显项目名称,在点击编辑触发的事件中,发送网络请求获取data

// 编辑赋值
        getEditValue(formName) {省略。。
        //获取数据后赋值,v-model双向绑定会显示,
        vm[formName].project = vm.formData.project
        }

最后调用接口

//获取projectList数据
 SVC_TaskDetailController.getProject(function (result, event) {
            vm.getData( result ,event, function (data) {
              vm.projectList = data.data
              console.log(vm.projectList)
            })
          })

点击保存按钮触发网络请求提交表单,此时要多传一个projectId的值

//加入projectId参数
query.projectId = vm[formName].project  ? vm[formName].project  : ''
//原来的接口不用动,加入上面参数就可以
SVC_TaskDetailController.editTask(JSON.stringify(query), function (result, event) {
                vm.loading = false
                vm.getData(result, event, function (data) {
                  vm.$alert(data.message, '提示', {
                    confirmButtonText: '确定'
                  })
                })
              })

最后效果:
回传受理项目成功
在这里插入图片描述
获取projiectList数据成功:
在这里插入图片描述
点击保存:
在这里插入图片描述
完美成功
在这里插入图片描述
总结:

一开始我以为v-model="repairEditForm.project是绑定的那个(是项目名?不知道一开始怎么理解的了),那传的时候服务器不知道我们选的是哪个项目,但其实选中哪个项目,项目的id值会被(:vaule动态绑定到project中),就是服务器需要的projectId。其实就是双向绑定原理。。自己琢磨半小时,大佬一点即通,学艺不精,惭愧惭愧。。还是要多问,多问!!

Day7请假体测

Day8 早上10点查6级成绩,没过,哭了。。


本文链接: http://www.dtmao.cc/news_show_350034.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?