vue的模糊查询和下拉菜单修改信息------------学习记录
HTML代码<div id="box"> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">选择信息</h3> </div> <div class="modal-body"> <select v-model="clselected" οnselect="clselected" id="cn"> //:value可以设置上value 一定要写: onselect可以将选择的value获取 绑定一个v-model通过watch监视值得改变 <option value="">请选择科室</option> <option v-for="clinic in clinics" :value="clinic.clId"> {{clinic.clName}} </option> </select> <select v-if="doname" v-model="doselected" οnselect="doselected" id="dn"> <option value="">请选医生</option> <option v-for="doctor in doctors" :value="doctor.doId"> {{doctor.doName}} </option> </select> <div class="modal-footer"> <button class="btn" type="button" data-dismiss="modal" aria-hidden="true">关闭</button> <button class="btn btn-primary" type="button" @click="saved" >确定</button> </div> </div> </div> <input type="text" v-model="input_value"/> //模糊查询 绑定属性通过watch来监视input里得值变化 <table class="table table-striped"> <thead> <th> <tr> <td>ID</td> <td>姓名</td> <td>年龄</td> <td>性别</td> <td>医生姓名</td> <td>科室</td> <td>时间</td> <td>操作</td> </tr> </th> </thead> <tbody> <tr v-show="you" v-for="guahao in entities"> <td>{{guahao.id}}</td> <td>{{guahao.guaName}}</td> <td>{{guahao.guaAge}}</td> <td>{{guahao.guaSex}}</td> <td>{{guahao.doctorEntity.doName}}</td> <td>{{guahao.clinicEntity.clName}}</td> <td>{{guahao.guaTime}}</td> <td> <button class="btn btn-primary btn-sm" @click="modify(guahao)" //返回当前的guahao数据 data-toggle="modal" data-target="#myModal">修改 </button> </td> </tr> <td v-show="!you">无信息</td> </tbody> </table> </div>JS代码:
<script>
var vm = new Vue({ el: "#box", data: { guahao:"", clinics: [], doctors: [], clselected: "", doselected:"", you: false, doname: false, input_value: "", entities: [{ id: "", guaName: "", guaAge: "", guaSex: "", doctorEntity: [{doName: ""}], clinicEntity: [{clName: ""}], guaTime: "" }] }, watch: { input_value: function (data) { if(typeof data==='string') if(data.trim().length!==0){ this.search(data) } }, clselected: function (data) { this.change(data) } }, methods: { search: function (resdata) { var that = this; //作用域不同要写that var guaName = resdata; $.ajax({ url: "findbyname.action", data: {name: guaName}, dataType: "json", type: "post", success: function (res) { console.log(res.guahaodanEntities); if (res.guahaodanEntities.length == 0) { that.$data.you = false; } else { that.$data.you = true; that.$data.entities = res.guahaodanEntities; } }, error: function () { alert("zzzz") } }) }, modify: function (guahao) { console.log(guahao); var that = this; this.guahao = guahao; $.ajax({ url: "findclinic.action", data: {}, dataType: 'json', error: function (e) { alert("1111") console.log(e) }, success: function (data) { console.log(data); data = data.clinicEntities; that.$data.clinics = data; }, type: 'POST' }); }, change: function (selected) { console.log(selected); this.$data.doname = true; var that = this; $.ajax({ url: "modfd.action", data: {"findclinicID": selected}, dataType: 'json', error: function (e) { alert("1111") console.log(e) }, success: function (data) { console.log(data); data = data.doctorEntities; that.$data.doctors = data; }, type: 'POST' }); }, saved:function () { var that = this; console.log(this.clselected); console.log(this.doselected); $.ajax({ url: "modghd2.action", data: { "guahaodanEntity.id":that.$data.guahao.id, "clinicEntity.clId":that.$data.clselected, "doctorEntity.doId":that.$data.doselected }, dataType: 'json', error: function (e) { alert("1111"); console.log(e) }, success: function (data) { console.log(data) that.guahao.doctorEntity.doName=data.doctorEntity.doName; that.guahao.clinicEntity.clName=data.clinicEntity.clName; }, type: 'POST' }); } }})
</script>
转载于:https://www.cnblogs.com/King-Jin/p/10987487.html
vue的模糊查询和下拉菜单修改信息------------学习记录相关推荐
- html 下拉列表 模糊查询,JS实现模糊查询带下拉匹配效果
"搜索"可以使我们更快的找到某一个关键词或者某一个商品,所以"模糊查询"和"下拉匹配"也成了前端必备的一个小技能,开门见山,希望对朋友们有帮 ...
- Android:有关下拉菜单导航的学习(供自己参考)
Android:有关==下拉菜单导航==的学习 因为先前的学习都没想着记录自己的学习历程,所以该博客才那么迟才开始写. 内容: ==下拉菜单导航== 学习网站:android Spinner控件详解 ...
- vue.js bootstrap 下拉列表_Excel下拉菜单制作的小技巧
在工作中,常常需要对多行多列的数据设置下拉菜单,但在使用数据验证,设置下拉菜单时,序列来源是不能执行引用多行多列区域的,否则即会出现下图提示框,应该如何进行设置呢? 第一步:定义名称框 鼠标依次点击公 ...
- html中按钮下拉菜单,Bootstrap3.0学习笔记之按钮与下拉菜单
前面的文章算是把Bootstrap CSS部分简单的学习了一遍,应该忽视了比较多的细节问题.不过大部分的内容我都过了一遍,并且用代码实现了一遍,而且看到了真实的效果.挺不错的.那么接下来的几篇文章主要 ...
- html下拉菜单模糊查询,Select下拉框模糊查询功能实现代码
select下拉列表框支持输入模糊查询功能,设计非常的人性化,下面小编给大家分享了关键代码,大家根据自己的需求适当的添加修改,有任何问题欢迎给我反馈. 关键代码如下所示: 可输入的下拉框 var j ...
- VUE前端二级部门联动下拉菜单
全部代码 <template><div style="float:left"><el-select v-model="big" p ...
- layui 单选框、复选框、下拉菜单 不显示问题 记录
1. 如果是 ajax嵌套了 页面, 请确保 只有最外层的页面引入了 layui.css 和 layui.js 内层页面 切记不要再次引入 2. layui.use(['form', 'upload ...
- ueditor添加下拉事件_Excel中最智能的三级下拉菜单!
我的目标:让中国的大学生走出校门的那一刻就已经具备这些office技能,让职场人士能高效使用office为其服务.支持我,也为自己加油! 关于制作下拉菜单的方法,我以前也写过, 比如用公式制作下拉菜单 ...
- vue2+element-ui创建顶部导航栏及下拉菜单
vue2+element-ui创建顶部导航栏及下拉菜单 引入顶部导航栏 使用下拉菜单 获取Vuex store数据 配置Vuex store 定义logout方法 引入顶部导航栏 创建client/s ...
最新文章
- linux sed命令的用法
- windows下tensorflow安装
- [Pyhon大数据分析] 二.PyEcharts绘制全国各地区、某省各城市地图及可视化分析
- linux sudo 免密码
- Magento 自定义URL 地址重写
- 入行架构师之前,这7项技能你要先了解一下
- Django:ORM基本操作-CRUD,管理器对象objects,----->查询3(单条更新,批量更新)
- nginx配置高可用的集群
- 软件测试的定义与分类
- 【社工】社会工程学框架
- gitee推送更新失败问题记录:remote: error: hook declined to update refs/heads/master
- Elasticsearch版本客户端与服务端版本不一致问题
- 网站页面篡改及挂马的应急处置
- php自学难_php难吗?自学要多久?需要报培训班吗?
- (原创)修改BIOS让华硕Z87-A老主板支持NVMe硬盘启动(采坑实录)
- Excel 如何排序与多关键字排序
- windows下修改中用户名为英文
- Contract Verify and Publish
- php 上上级目录的表示
- 在与SQL Server建立连接时出现与网络相关的或特定于实例的错误。未找到或无法访问服务器。请验证实例名称是否正确并且SQL Server已配置为允许远程连接。(provider:命名管道提供程序,
热门文章
- http抓包神器:Charles for Mac 特别版v4.6
- frame中src怎么设置成一个变量_在 Figma 中如何选择 group(组)或 frame(画框)?...
- java ssh优势_java框架组合ssm和ssh各自的优势是什么?
- plpythonu_PostgreSQL PL/Python 函数
- git 获取最新代码_程序员必知:这是一份全面 amp; 详细的 Git与Github 介绍指南
- input内容右对齐_向右打方向倒库过程中,如何判断后车距离?光线较暗车库倒库技巧...
- C++工作笔记-模版中class更新为typename
- C/C++中Windows API 简单的(Callback)回调机制
- c语言程序输出时有没有分号,问什么C程序里总是提示缺少分号;,而明明有分号?...
- php进阶课程,php进阶教程学习