調(diào)用接口實現(xiàn)Table增刪改

IT那活兒發(fā)布于2023-01-11 13:19 / 1401人閱讀

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

HTML頁面

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

<el-form :inline="true" style="float: right">
        
          <el-button type="success" size="small" icon="el-
icon-edit" @click="addExcel(0)" >新增進(jìn)程信息
        el-form-item>
        
          <el-button type="danger" size="small" icon="el-
icon-delete" @click="deleteExcel">批量刪除進(jìn)程信息
        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. 新增編輯進(jìn)程信息彈窗

<el-dialog :title="editTitle == 0 ? 新增進(jìn)程信息 : 編輯進(jìn)程信息" :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. 新增進(jìn)程表單校驗

rule: {
        name: [{ required: true, message: "請?zhí)顚懨Q", trigger: "bulr" },],
        extract: [{ required: true, message: "請?zhí)顚慐CTRACT", trigger: "bulr" },],
        pump: [{ required: true, message: "請?zhí)顚慞UMP", trigger: "bulr" },],
        ip: [{ required: true, message: "請?zhí)顚慖P", trigger: "bulr" },],
      },

方法

1. 點擊新增按鈕

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

2. 點擊修改按鈕

editFormConfim(edit, row) {
      this.addDialogFormVisible = true;//修改進(jìn)程彈窗可見
      this.editTitle = edit; //此時進(jìn)程標(biāo)題為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. 新增編輯確認(rèn)

editFormInfo() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          if (this.editTitle == 0) {//editTitle 為0是為新增
            this.$fetch("POST", "/oggRoute/add", //請求方法 地址 參數(shù)
              params).then((response) => {
              if (response.msgCode == 200) {
                this.$message({
                  showClose: true,
                  message: "添加成功",
                  type: "success",
                });
                this.addDialogFormVisible = false; //執(zhí)行成功后關(guān)閉彈窗
                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. 當(dāng)選擇項發(fā)生變化時會觸發(fā)該事件

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

5. 批量刪除事件

deleteExcel() {
      if (this.selectIds.length === 0) {
        this.$message.warning("未選擇數(shù)據(jù)");
        return;
      }
      this.$confirm("確認(rèn)刪除嗎?", "提示", {
        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("確認(rèn)刪除嗎?", "提示", {
        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(() => {});
    },