基於vue-easytable實現數據的增刪改查javascript
原理：利用vue的數據綁定和vue-easetable的ui完成增刪改查vue
後端接口：java
1.條件查詢表中數據web
http://localhost:47953/Home/GetJtncSelectJsonResult
2.經過id查詢單條數據ajax
http://localhost:47953/Home/UploadJtnc
3.保存數據數據庫
http://localhost:47953/Home/SaveJtnc
4.刪除數據後端
http://localhost:47953/Home/DeleteJtnc
代碼：async
<template>
<div id="vueeasytable" style="background: #ccc;padding:40px;min-height: 1500px;" >
<h3 style="text-align: left;margin-top: 30px">
家庭農場
<div style="float:right">
<at-button type="primary" @click="seeData">查看</at-button>
<at-button type="primary" @click="addModalframe=true">添加</at-button>
<at-button type="success" @click="modifyData">修改</at-button>
<at-button type="warning" @click="deleData">刪除</at-button>
</div>
</h3>
<hr>
<div style="margin-bottom: 20px">
<span> 身份證號：</span><at-input v-model="sfzhcx" placeholder="輸入提示" status="info" style="width:280px;display:inline-block"></at-input>
<at-button type="primary" @click="selectData">查詢</at-button>
</div>
<div class="col-md-24 col-sm-24 col-xs-24" style="padding:30px;">
<v-table
is-horizontal-resize
style="width:100%"
:columns="columns"
:table-data="tableData"
:show-vertical-border="false"
:select-change = "GetSelectObj"
></v-table>
<div style="padding:20px;float:right;">
<v-pagination :total="dataNum" :page-size="10" @page-change="pageChange" @page-size-change="pageSizeChange"></v-pagination>
</div>
</div>
<!--單條信息查看模態框-->
<at-modal v-model="seeModalframe" title="查看" >
企業編碼：{{seeobjs.QYBM}}
<br>
...
<br>
備註：{{seeobjs.BZ}}
</at-modal>
<!--添加模態框-->
<at-modal v-model="addModalframe" title="添加" @on-confirm="addConfirm"><!-- @on-cancel="handleCancel"-->
<span style="width:70px;margin-bottom: 10px;">企業編碼：</span><at-input v-model="addModel.QYBM" placeholder="輸入提示" status="info" style="margin-bottom: 10px;width:420px;display: inline-block"></at-input>
<br>
...
<br>
<span style="width:70px;margin-bottom: 10px;">備註：</span><at-input v-model="addModel.BZ" placeholder="輸入提示" status="info" style="margin-bottom: 10px;width:420px;display: inline-block"></at-input>
</at-modal>
<!--修改模態框-->
<at-modal v-model="modifyModalframe" title="修改" @on-confirm="modifyConfirm"><!--@on-confirm="handleConfirm" @on-cancel="handleCancel"-->
<span style="width:70px;margin-bottom: 10px;">企業編碼：</span><at-input v-model="modifyModel.QYBM=seeobjs.QYBM" status="info" style="margin-bottom: 10px;width:420px;display: inline-block"></at-input>
<br>
...
<br>
<span style="width:70px;margin-bottom: 10px;">備註：</span><at-input v-model="modifyModel.BZ=seeobjs.BZ" status="info" style="margin-bottom: 10px;width:420px;display: inline-block"></at-input>
</at-modal>
</div>
</template>
<script>
export default {
name: 'vueeasytable',
data() {
return {
/*獲取數據*/
GetData:[],
/*表格信息*/
pageIndex:1,/*頁碼*/
pageSize:10,/*每頁條數*/
dataNum:0,/*數據總條數*/
columns: [
{width: 60, titleAlign: 'center',columnAlign:'center',type: 'selection'},
{field: 'QYBM', title:'企業編碼', width: 100, titleAlign: 'center',columnAlign:'center',isResize:true},
{field: 'ZTMC', title: '主體名稱', width: 260, titleAlign: 'center',columnAlign:'center',isResize:true},
{field: 'SFZH', title: '身份證號', width: 100, titleAlign: 'center',columnAlign:'center',isResize:true},
{field: 'NCMC', title: '農場名稱', width: 100, titleAlign: 'center',columnAlign:'center',isResize:true},
{field: 'ZTDJ', title: '主體等級', width: 100, titleAlign: 'center',columnAlign:'center',isResize:true},
{field: 'XYDJ', title: '信用等級', width: 100, titleAlign: 'center',columnAlign:'center',isResize:true}
],/*列表項*/
tableData: [],/*表格數據*/
/*查詢條件*/
sfzhcx:"",/*身份證號*/
/*選中的對象*/
SelectObj:[],
seeobjs:{},
/*查看單條信息開關*/
seeModalframe:false,
/*添加單條信息開關*/
addModalframe:false,
/*修改單條信息開關*/
modifyModalframe:false,
/*添加的數據model*/
addModel:{},
/*修改數據*/
modifyModel:{},
}
},
created(){
/*數據初始化*/
this.getTableData();
},
mounted: function () {
},
methods: {
/*數據獲取*/
Getwebsites(){
var websites;
$.ajax({
type: 'post',
async: false,
url: 'http://localhost:47953/Home/GetJtncSelectJsonResult',
data:{selectobj:this.sfzhcx},
success:function (response) {
websites = response;
},
error:function (error) {
console.log(error)
}});
return websites;
},
/*數據處理*/
websitesHandle () {
/*獲取條件查詢結果*/
var websites = this.Getwebsites();
/*數據處理*/
var websit;
var websitArrtys=[];
for(var i in websites){
websit = {
ID:websites[i].ID,
QYBM:websites[i].QYBM,
ZTMC:websites[i].ZTMC,
SFZH:websites[i].SFZH,
NCMC:websites[i].NCMC,
ZTDJ:websites[i].ZTDJ,
XYDJ:websites[i].XYDJ,
};
websitArrtys.push(websit)
}
const data = websitArrtys;
let pageData = [];
pageData = pageData.concat(data);
this.GetData = pageData;
this.dataNum = this.GetData.length;
},
/*分頁處理*/
getTableData(){
this.websitesHandle();
this.tableData =this.GetData.slice((this.pageIndex-1)*this.pageSize,(this.pageIndex)*this.pageSize);
},
/*頁碼觸發更新*/
pageChange(pageIndex){
this.pageIndex = pageIndex;
this.getTableData();
},
/*每頁條數觸發更新*/
pageSizeChange(pageSize){
this.pageIndex = 1;
this.pageSize = pageSize;
this.getTableData();
},
/*條件查詢*/
selectData(){
this.websitesHandle();
this.tableData =this.GetData.slice((this.pageIndex-1)*this.pageSize,(this.pageIndex)*this.pageSize);
},
/*獲取選中對象*/
GetSelectObj(obj){
this.SelectObj=[];
this.SelectObj = this.SelectObj.concat(obj);
},
/*查看單條記錄詳細信息*/
seeData(){
/*判斷已經選擇數據的條數*/
if(this.SelectObj.length ==0){
this.$Modal.alert({
title: '錯誤信息',
content: '請先選擇一條記錄'
})
}
else if(this.SelectObj.length >1){
this.$Modal.alert({
title: '錯誤信息',
content: '每次只能夠查看一條記錄'
})
}
else if(this.SelectObj.length ==1){
this.seeModalframe=true;
var Data;
$.ajax({
type: 'post',
async: false,
url: 'http://localhost:47953/Home/UploadJtnc',
data:{id:this.SelectObj[0].ID},
success:function (response) {
Data = response;
},
error:function (error) {
console.log(error)
}
});
this.seeobjs = Data;
}
},
/*將數據渲染在修改模態框上*/
modifyData(){
if(this.SelectObj.length ==0){
this.$Modal.alert({
title: '錯誤信息',
content: '請先選擇一條記錄'
})
}
else if(this.SelectObj.length >1){
this.$Modal.alert({
title: '錯誤信息',
content: '每次只能夠查看一條記錄'
})
}
else if(this.SelectObj.length ==1){
this.modifyModalframe=true;
var Data;
$.ajax({
type: 'post',
async: false,
url: 'http://localhost:47953/Home/UploadJtnc',
data:{id:this.SelectObj[0].ID},
success:function (response) {
Data = response;
},
error:function (error) {
console.log(error)
}
});
this.seeobjs = Data;
}
},
/*修改確認，將數據修改到數據庫*/
modifyConfirm(){
console.log(this.modifyModel)
$.ajax({
type: 'post',
async: false,
url: 'http://localhost:47953/Home/SaveJtnc',
data:this.modifyModel,
success:function (response) {
console.log(response)
},
error:function (error) {
console.log(error)
}
});
$.ajax({
type: 'post',
async: false,
url: 'http://localhost:47953/Home/DeleteJtnc',
data:{id:this.SelectObj[0].ID},
success:function (response) {
console.log(response)
},
error:function (error) {
console.log(error)
}
});
this.selectData();
this.SelectObj=[];
},
/*添加數據*/
addConfirm(){
$.ajax({
type: 'post',
async: false,
url: 'http://localhost:47953/Home/SaveJtnc',
data:this.addModel,
success:function (response) {
console.log(response)
},
error:function (error) {
console.log(error)
}
});
this.selectData();
},
/*刪除數據*/
deleData(){
$.ajax({
type: 'post',
async: false,
url: 'http://localhost:47953/Home/DeleteJtnc',
data:{id:this.SelectObj[0].ID},
success:function (response) {
console.log(response)
},
error:function (error) {
console.log(error)
}
});
this.selectData();
this.SelectObj=[];
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
原創不易：轉載請註明出處post