zl程序教程

您现在的位置是:首页 >  前端

当前栏目

前端vue如何对接接口,如何传参,传id,实现删除,父子组件传值等等功能?

Vue接口组件前端 实现 如何 功能 删除
2023-09-11 14:19:17 时间

两个接口对比 

 可以看到  后端给的接口id和handle是必传(必选:是),如果参数不是必选就可以不传(一般id是必传的)

html代码

<el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            type="text"
            style="color: #246deb"
            @click.stop="recoverFn(row)">恢复</el-button>
          <el-button type="text" style="color: #ff4d4f" @click="deleteFn(row)">删除</el-button>
        </template>
      </el-table-column>

js代码

恢复按钮

  //恢复按钮
    recoverFn(scope) {
      let recovDate = {
        handle: 1,
        id: scope.id,
      };
      console.log("恢复scope", scope);
      recyclingHandlePost(recovDate).then((res) => {
        console.log("恢复按钮", res);
        if (res.data.code == 666) {
          this.$message.success(res.data.msg);
          this.recyclingList(); //调接口,回收站列表
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },

删除按钮

  //删除按钮
    deleteFn(scope) {
      let delData = {
        handle: 2,
        id: scope.id,
      };
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          recyclingHandlePost(delData).then((res) => {
            console.log("删除按钮", res);
            if (res.data.code == 666) {
              this.$message.success(res.data.msg);
              this.recyclingList(); //调接口,回收站列表
            } else {
              this.$message.error(res.data.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });

      //删除-> 纯前端写法(可以忽视)
      // console.log(row)
      // // 第一种
      // // var index = this.tableData.findIndex((item) => {
      // //   if (item.id == id) {
      // //     return true;
      // //   }
      // // });
      // // this.tableData.splice(index, 1);
      // //  第二种
      // this.tableData = this.tableData.filter(
      //   item => item.collectionData != row.collectionData
      // )
    },

如果是父子组件传值


父组件data中定义一个参数
把id通过点击对应的按钮赋值给定义的参数, 
把参数绑定到组件上,
子组件通过props接收


如果依旧不能实现,控制台log一下简单明了

如果觉得本文章对于您有些许帮助,可以点击关注,分享更多前端初学者知识~