版权声明：转载原创文章请以超链接形式请注明原文章出处，尊重作者，尊重原创！
恰饭广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://www.idaobin.com/css/bootstrap-3.3.7.min.css" rel="stylesheet">
<script src="https://www.idaobin.com/js/jquery-3.4.1.js"></script>
<script src="https://www.idaobin.com/js/bootstrap-3.3.7.min.js"></script>
<script src="https://www.idaobin.com/js/vue-2.6.10.js"></script>
<script src="https://www.idaobin.com/js/axios-0.19.js"></script>
</head>
<body>
<div id="app">
<table class="table table-bordered" id="table">
<thead>
<tr>
<td>序号</td>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in doctor">
<td>{{index+1}}</td>
<td contenteditable="true">{{item.id}}</td>
<td contenteditable="true">{{item.name}}</td>
<td contenteditable="true">{{item.dname}}</td>
<td>
<button @click="edit(item)" class="btn btn-info btn-sm" data-toggle="modal"
data-target="#editModal">编辑</button>
</td>
</tr>
</tbody>
</table>
<!-- 编辑学生 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="addodalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
编辑学生
</h4>
</div>
<div class="modal-body">
<p>
<label>学号：</label>
<input type="text" value="" v-model="editdata.id">
</p>
<p>
<label>姓名：</label>
<input type="text" value="" v-model="editdata.name">
</p>
<p>
<label>年龄：</label>
<input type="number" value="" v-model="editdata.dname">
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">
提交更改
</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(function () {
vue.loadData();
});
var vue = new Vue({
el: "#app",
data: {
//传入参数
para: {
user: 1001,
pwd: 123,
op: "home"
},
//后台返回的json
doctor: {},
//编辑数据的json
editdata:{}
},
// created: function () {
// this.loadData(); //页面加载
// },
methods: {
loadData: function () {
var that = this;
axios.post('/Outpatient/Doctor', this.para, { //请求地址
transformRequest: [
function (data) {
let params = '';
for (let index in data) {
params += index + '=' + data[index] + '&';
}
return params.substring(0, params.length - 1);
}
]
}).then(resp => {
//获取返回的json
var doc = JSON.parse(resp.data.doctor);
that.doctor = doc; //json赋值
}).catch(error => {
console.log('请求失败：' + error.message);
});
},
//编辑方法
edit: function (item) {
this.editdata = {
id: item.id,
name: item.name,
dname: item.dname
};
}
},
});
</script>
</html>
原文链接：https://www.idaobin.com/archives/2087.html
让我恰个饭吧.ヘ(￣ω￣ヘ)
支付宝 ——————- 微信
恰饭广告
