基于vue-easytable实现数据的增删改查

基于vue-easytable实现数据的增删改查

原理：利用vue的数据绑定和vue-easetable的ui完成增删改查

后端接口：

1.条件查询表中数据

http://localhost:47953/Home/GetJtncSelectJsonResult

2.通过id查询单条数据

http://localhost:47953/Home/UploadJtnc

3.保存数据

http://localhost:47953/Home/SaveJtnc

4.删除数据

http://localhost:47953/Home/DeleteJtnc

代码：

<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="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="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="70px;margin-bottom: 10px;">企业编码：</span><at-input v-model="addModel.QYBM" placeholder="输入提示"  status="info"  style="margin-bottom: 10px;420px;display: inline-block"></at-input>
      <br>
      ...
      <br>
      <span style="70px;margin-bottom: 10px;">备注：</span><at-input v-model="addModel.BZ" placeholder="输入提示"  status="info"  style="margin-bottom: 10px;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="70px;margin-bottom: 10px;">企业编码：</span><at-input v-model="modifyModel.QYBM=seeobjs.QYBM"   status="info"  style="margin-bottom: 10px;420px;display: inline-block"></at-input>
      <br>
      ...
      <br>
      <span style="70px;margin-bottom: 10px;">备注：</span><at-input v-model="modifyModel.BZ=seeobjs.BZ"   status="info"  style="margin-bottom: 10px;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: [
        { 60, titleAlign: 'center',columnAlign:'center',type: 'selection'},
        {field: 'QYBM', title:'企业编码',  100, titleAlign: 'center',columnAlign:'center',isResize:true},
        {field: 'ZTMC', title: '主体名称',  260, titleAlign: 'center',columnAlign:'center',isResize:true},
        {field: 'SFZH', title: '身份证号',  100, titleAlign: 'center',columnAlign:'center',isResize:true},
        {field: 'NCMC', title: '农场名称',  100, titleAlign: 'center',columnAlign:'center',isResize:true},
        {field: 'ZTDJ', title: '主体等级',  100, titleAlign: 'center',columnAlign:'center',isResize:true},
        {field: 'XYDJ', title: '信用等级',  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>

　　

原创不易：转载请注明出处