项目场景:

项目需求:用vue在el-table中添加每一行的操作,需要在操作时对按钮进行禁用操作,在返回参数后根据参数判断是否可以解除禁用,并将参数实时更新到页面上


解决方案:

1、第一种解决方案

    我们可以将禁用按钮定义为一个变量

    

    这类型的变量证明该参数是存储于list参数中的,也就是我会去动态添加参数到list中

    知道了操作方法,那就可以去操作我们的url方法了,因为我在点击按钮的时候会有一个弹框,进行确认操作,也就是在弹框弹出之前我们需要先将参数添加到list中,并默认设置为true,但是我们需要确定我们操作的行数,就需要我们传递一个行号来进行精确操作scope.$index就是获取行号的方法

    

    上图我们可以使用this.$set(需要添加的数据集,变量名,参数);   //这个方法可以直接添加新变量,如果是数据集中已经有的变量名,那这个方法会自动修改该变量的值(新增/修改)

    然后我们就可以执行我们的接口方法

    

thirdToolShow (row,currentIndex) {
        this.$set(this.thirdToolList[currentIndex],'btnStyle',true);
        this.$confirm('是否确认执行操作', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.$message({
            type: 'success',
            message: '执行成功!',
          });
          //访问第三方工具
          var params = {
            modelId: row.model_id,
            modelName: row.model_name,
            modelType: row.model_type,
            sjId: row.sjId,
          }
          exeThirdToolData(params).then(
            response => {
              this.$load.close();
              if(response.success){
                //提示信息
                this.$notify({
                  title: '成功',
                  message: '数据同步成功',
                  type: 'success'
                });
                //设置允许点击并修改参数
                this.$set(this.thirdToolList[currentIndex],'btnStyle',false);
                this.$set(this.thirdToolList[currentIndex],'doubt_num',response.data);
              }else{
                this.$notify.error({
                  title: '失败',
                  message: '数据同步失败'
                });
                this.$set(this.thirdToolList[currentIndex],'btnStyle',false);
              }
            },
            response => {
              console.info(response);
            }
          );
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消成功'
          });
        });
      },

    2、第二种解决方案

    这个方法我是看见有大佬是这么写的,参考文章因为我并没有测试该方法,所以大家请自行参考

Logo

前往低代码交流专区

更多推荐