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的模糊查询和下拉菜单修改信息------------学习记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。