調用接口實現Table增刪改

IT那活兒發布于2023-01-11 13:19 / 1393人閱讀

調用接口實現Table增刪改

點擊上方“IT那活兒”公眾號，關注后了解更多內容，不管IT什么活兒，干就完了！！！

HTML頁面

1. 新增按鈕、批量刪除按鈕

<el-form :inline="true" style="float: right">
        
          <el-button type="success" size="small" icon="el-
icon-edit" @click="addExcel(0)" >新增進程信息
        el-form-item>
        
          <el-button type="danger" size="small" icon="el-
icon-delete" @click="deleteExcel">批量刪除進程信息
        el-form-item>
      el-form>

2. Table列表組件

<el-table :data="processDate" border v-loading="processDateLoading" style="width:100%"  @selection-change="selectChange">
      <el-table-column type="selection" width="55" align="center">el-table-column>
      <el-table-column prop="id" label="ID" align="center" >el-table-column>
      <el-table-column prop="name" label="名稱" align="center" >el-table-column>
      <el-table-column prop="extract" label="EXTRACT" align="center">el-table-column>
      <el-table-column prop="pump" label="PUMP" align="center"> el-table-column>
      <el-table-column prop="ip" label="IP" align="center" > el-table-column>
      <el-table-column label="操作" align="center" min-width="60">
        
      el-table-column>
    el-table>

3. 新增編輯進程信息彈窗

<el-dialog :title="editTitle == 0 ? 新增進程信息 : 編輯進程信息" :visible.sync="addDialogFormVisible"
      :destroy-on-close="true"  append-to-body>
      <el-form :model="addForm" status-icon :rules="rule" ref="addForm" :inline="true" label-width="120px" >
        <el-form-item label="名稱" prop="name">
          <el-input v-model="addForm.name" style="width: 220px">el-input>
        el-form-item>
        <el-form-item label="ECTRACT" prop="extract">
          <el-input v-model="addForm.extract" style="width: 220px" >el-input>
        el-form-item>
        <el-form-item label="PUMP" prop="pump">
          <el-input v-model="addForm.pump" style="width: 220px" >el-input>
        el-form-item>
        <el-form-item label="IP" prop="ip">
          <el-input v-model="addForm.ip" style="width: 220px">el-input>
        el-form-item>
      el-form>
      "footer" class="dialog-footer">
        <el-button size="small" @click="addDialogFormVisible = false" >取 消el-button >
        <el-button size="small" type="primary" @click="editFormInfo">確 定el-button >
      

    el-dialog>

4. 新增進程表單校驗

rule: {
        name: [{ required: true, message: "請填寫名稱", trigger: "bulr" },],
        extract: [{ required: true, message: "請填寫ECTRACT", trigger: "bulr" },],
        pump: [{ required: true, message: "請填寫PUMP", trigger: "bulr" },],
        ip: [{ required: true, message: "請填寫IP", trigger: "bulr" },],
      },

方法

1. 點擊新增按鈕

addExcel(edit) {
      this.editTitle = edit; //此時進程標題為0
      this.addDialogFormVisible = true; //新增進程彈窗可見
    },

2. 點擊修改按鈕

editFormConfim(edit, row) {
      this.addDialogFormVisible = true;//修改進程彈窗可見
      this.editTitle = edit; //此時進程標題為1
      this.addForm.id = row.id; //把列表信息帶入修改頁面中
      this.addForm.name = row.name;
      this.addForm.extract = row.extract;
      this.addForm.pump = row.pump;
      this.addForm.ip = row.ip;
    },

3. 新增編輯確認

editFormInfo() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          if (this.editTitle == 0) {//editTitle 為0是為新增
            this.$fetch("POST", "/oggRoute/add", //請求方法 地址 參數
              params).then((response) => {
              if (response.msgCode == 200) {
                this.$message({
                  showClose: true,
                  message: "添加成功",
                  type: "success",
                });
                this.addDialogFormVisible = false; //執行成功后關閉彈窗
                this.selectExcel(); //查詢信息列表接口
              } else {
                this.$message.error("添加失敗：" + response.message);
              } });
          } else {//editTitle 為1是為編輯
            this.$fetch("POST", "/oggRoute/update", params
            ).then((response) => {
              if (response.msgCode == 200) {
                this.$message({
                  showClose: true,
                  message: "修改成功",
                  type: "success",
                });
                this.addDialogFormVisible = false;
                this.selectExcel();//查詢信息列表接口
              } else {
                this.$message.error("修改失敗：" + response.message);
              } }); } } });},

4. 當選擇項發生變化時會觸發該事件

selectChange(ids) {//多選進程信息id數組
      this.selectIds = ids.map((row) => row.id);
    },

5. 批量刪除事件

deleteExcel() {
      if (this.selectIds.length === 0) {
        this.$message.warning("未選擇數據");
        return;
      }
      this.$confirm("確認刪除嗎?", "提示", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$fetch("POST", "/oggRoute/delete", params
          ).then((res) => {
            if (res.msgCode === 200 && res.data.result) {
              this.$message.success("刪除成功");
              this.selectExcel();
            } }); })
        .catch(() => {});
    },

6. 單條刪除事件

handleDelete(row) {
      let deleteId = [];
      deleteId.push(row);
      this.$confirm("確認刪除嗎?", "提示", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning",
      }) .then(() => {
          this.$fetch("POST", "/oggRoute/delete",
            params).then((res) => {
            if (res.msgCode === 200 && res.data.result) {
              this.$message.success("刪除成功");
              this.selectExcel();
            } }); })
        .catch(() => {});
    },

本文作者：池思敏（上海新炬王翦團隊）

本文來源：“IT那活兒”公眾號

云服務器 GPU云服務器實現增刪改查增刪改大數據增刪改登錄增刪改查

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/129402.html

vue2.0+axios+elementUI實現增刪改查

最近嘗試使用vue+element實現增刪改查功能，在實現的過程中遇到了蠻多問題，現在總結如下：首先安裝相關的插件1、根據vue官網推薦，使用axios進行前后臺交互，安裝axiosnpm install axios -S2、安裝elementUI，官網npm i element-ui -S3、安裝 loader 模塊npm install style-loader -Dnpm install c...

rollback 2019-08-23 10:33 評論0 收藏0
03 基于umi搭建React快速開發框架(封裝列表增刪改查)

摘要：前言大家在做業務系統的時候，很多地方都是列表增刪改查，做這些功能占據了大家很長時間，如果我們有類似的業務，半個小時就能做出一套那是不是很爽呢。我們這套框架對此做了下封裝，適合的小伙伴也可以借鑒封裝到自己的框架當中去。前言大家在做業務系統的時候，很多地方都是列表增刪改查，做這些功能占據了大家很長時間，如果我們有類似的業務，半個小時就能做出一套那是不是很爽呢。這樣我們就可以有更多的時間...

snowLu 2019-08-26 13:24 評論0 收藏0
SpringBoot2.0之三優雅整合Spring Data JPA

摘要：的配置后在其他低版本的中也有使用這種配置的，具體根據版本而定。等注解是的相關知識，后面的文章將詳細講述。 ??在我們的實際開發的過程中，無論多復雜的業務邏輯到達持久層都回歸到了增刪改查的基本操作，可能會存在關聯多張表的復雜sql，但是對于單表的增刪改查也是不可避免的，大多數開發人員對于這個簡單而繁瑣的操作都比較煩惱。 ??為了解決這種大量枯燥的簡單數據庫操作，大致的解決該問題的有三種方...

ningwang 2019-08-15 18:19 評論0 收藏0
Web API 開發實踐

摘要：通過業務處理異常，將不正常的業務處理結果返回給調用者或其他。通常會在層中寫與數據庫相關的代碼，如表的關聯關系，表屬性的可取值等。返回此類響應表示服務器拋出了未捕捉處理的異常或錯誤。前言之前在公司負責了一個項目，進行了前后端分離，筆者負責了整個項目的基本結構的搭建，在此總結一些經驗。本文主要介紹后端web api的設計與實現。demo代碼鏈接：github代碼基本架構代碼分層應...

doodlewind 2019-07-01 12:50 評論0 收藏0
【從零入門系列-2】Spring Boot 之數據庫實體定義實現

摘要：文章系列從零入門系列之從零入門系列之程序結構設計說明前言本篇文章開始代碼實踐，系統設計從底向上展開，因此本篇先介紹如何實現數據庫表實體類的設計實現。主鍵由數據庫自動生成主要是自動增長型主鍵由程序控制。文章系列【從零入門系列-0】Sprint Boot 之 Hello World 【從零入門系列-1】Sprint Boot 之程序結構設計說明前言本篇文章開始代碼實踐，系統...

nemo 2019-08-19 11:41 評論0 收藏0