vue对表格中的每行操作按钮进行禁用操作

项目场景:

项目需求:用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、第二种解决方案

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

  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值