vue对表格中的每行操作按钮进行禁用操作
项目场景:项目需求:用vue在el-table中添加每一行的操作,需要在操作时对按钮进行禁用操作,在返回参数后根据参数判断是否可以解除禁用,并将参数实时更新到页面上解决方案:1、第一种解决方案我们可以将禁用按钮定义为一个变量这类型的变量证明该参数是存储于list参数中的,也就是我会去动态添加参数到list中知道了操作方法,那就可以去操作我们的url方法了,因为我在点击按钮的时候会有一个弹框,进行确
·
项目场景:
项目需求:用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条内容
所有评论(0)