增删改查（Vue）

1.新增

    addRules() {
      if (this.addInfo.wasteFactoryName == "" || this.addInfo.wasteName == "") {
        this.$message.error("请选择厂家名称及危废名称");
      } else {
        let params = {
          wasteName: this.addInfo.wasteName,
          wasteFactoryName: this.addInfo.wasteFactoryName,
        };
        addRuleInfo(params).then((res) => {
          if (res.success) {
            this.$message({
              message: "新增成功!",
              type: "success",
            });
          } else {
            this.$message.error("新增失败");
          }
          this.loading = true;
          this.getContentList();
        });
        this.addDialogVisible = false;
        this.addInfo.wasteName = "";
        this.addInfo.wasteFactoryName = "";
        this.drawer = false;
      }
    },

注：点击新增打开弹窗，输入新增信息，点击确认（代码中addRule函数）

data中---->>>addInfo: {
        wasteFactoryName: "",
        wasteName: "",
      },
表单双向绑定----->>>v-model="addInfo.wasteFactoryName"

2.删除

--------------------------------------------------------------------------------------
<!-- 点击删除按钮，传id参数 -->
<el-button type="text" @click="deleteClick(item.wasteId)">删除</el-button>
--------------------------------------------------------------------------------------
// 函数
    //deleteContentInfo()为接口请求函数
    deleteClick(wasteId) {
      this.dialogVisible = true;
      this.wasteidValue = wasteId;
    },
    // 删除请求函数
    deleteConfirm() {
      deleteContentInfo(this.wasteidValue).then((res) => {
        if (res.success) {
          this.$message({
            message: "删除成功!",
            type: "success",
          });
          this.loading = true;
          this.getContentList();
        } else {
          this.$message.error("删除失败");
        }
      });
      this.dialogVisible = false;
    },

注：注意传id参数

data中---->>>wasteidValue: ""

3.改

<el-button type="text" @click="editClick(item)">编辑</el-button>

    // 编辑按钮
   //editInfo为编辑弹窗中的表单双向绑定
   // editContentInfo()函数为接口请求函数
    editClick(item) {
      this.editInfo.wasteId = item.wasteId;
      this.editInfo.wasteFactoryName = item.wasteFactoryName;
      this.editInfo.wasteName = item.wasteName;
      this.drawerEdit = true;//打开编辑弹窗
    },
    // 编辑请求函数
    editConfim() {
      if (
        this.editInfo.wasteFactoryName == "" ||
        this.editInfo.wasteName == ""
      ) {
        this.$message.error("请选择厂家名称及危废名称");
      } else {
        let params = {
          wasteId: this.editInfo.wasteId,
          wasteName: this.editInfo.wasteName,
          wasteFactoryName: this.editInfo.wasteFactoryName,
        };
        editContentInfo(params).then((res) => {
          if (res.success) {
            this.$message({
              message: "编辑成功!",
              type: "success",
            });
          } else {
            this.$message.error("编辑失败");
          }
        });
        this.loading = true;
        this.getContentList();
        this.drawerEdit = false;
      }
      this.editInfo.wasteFactoryName = "";
      this.editInfo.wasteName = "";
    },

editInfo: {
        wasteId: "",
        wasteFactoryName: "",
        wasteName: "",
      },

4.增删改查接口请求（具体请求在axios封装文章axios）

export function getCompatibilityManage(params) {
    return request({
        url:'/frontDemo/queryPage',
        method:'get',
        params
    })
}
export function addRuleInfo(data) {
    return request({
        url:'/frontDemo/addObject',
        method:'post',
        data
    })
}
export function deleteContentInfo(data) {
    return request({
        url:'/frontDemo/delObject',
        method:'post',
        data
    })
}
export function editContentInfo(data) {
    return request({
        url:'/frontDemo/editObject',
        method:'post',
        data
    })
}