vue中根据后端接口数据控制按钮的显示与隐藏（手动添加响应式this.$set()）

已于 2022-04-19 10:16:30 修改
阅读量6.8k 收藏 5
点赞数 1
分类专栏： # vue 前端 文章标签： vue.js javascript 前端
于 2022-04-08 16:22:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44320032/article/details/124043036
版权
本文介绍了在Vue项目中如何根据后端接口返回的数据，利用this.$set()手动添加响应式来实现按钮的显示与隐藏。详细讲述了从查看接口到配置参数，再到处理数据和解决问题的整个过程，最后总结了解决此类问题的关键点。
摘要由CSDN通过智能技术生成

项目涉及到的问题，按钮需要根据后端返回的参数情况，实现按钮的显示与隐藏。

效果如图：

 1.查看后端接口

get请求，需要传businessId和compoCode两个参数，返回的data有数据就显示按钮，没数据就隐藏按钮。

2.在config.js中配置

isExistProcess: `/${version}/common/isExistProcess`,

3.准备参数

地址有了，compoCode是每个页面唯一的可直接获取，businessId是getTableData接口传过来的，所以需要先调用getTableData接口。每条数据有唯一的businessId。因为需要把数据一条条传过去（即传唯一的compoCode和唯一的businessId），而且需要在页面加载完成时就获取到所有的id（即获取不到row），所以需要

最低0.47元/天 解锁文章
芝士焗红薯
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue通过接口判断list中的按钮是否展示
weixin_42074004的博客
03-13 744
/当接口查回来的id等于列表中当前行的serverId时，把查回来的是否显示按钮的值赋给原列表行的数据。)">重新报名//在list中调用是否显示这个按钮的接口。// 是否显示重新报名的接口查询。
根据后台权限返回值显示按钮
weixin_49718098的博客
07-29 273
根据后台权限返回值显示按钮 在main.js中全局自定义指令。然后在页面中引用 Vue.directive('has', { inserted: function(el, binding) { // console.log(el,'----',binding.value); // console.log(localStorage.getItem('authList'),'===='); if (permissionJudge(binding.value)) {
vue3根据路由参数判断按钮是否显示
最新发布
2301_80636534的博客
07-22 330
【代码】vue3根据路由参数判断按钮是否显示。
Vue根据权限获取页面按钮显示与隐藏
weixin_42155710的博客
08-12 1689
Vue封装取页面权限按钮显示与隐藏
java后台判断是否隐藏页面按钮_web后台根据权限控制按钮显示/隐藏的方案
weixin_34206129的博客
02-17 744
上午朋友问我一个问题：他用ajax 请求服务端判断权限，根据服务端返回来隐藏没有权限的按钮，这样有一个问题就是页面加载后按钮会闪一下。这个问题我很自然的就想到：那就把按钮默认都隐藏，ajax 判断完之后再显示有权限的按钮。。。这是一个成本比较低的办法，但不是个好办法。吃完饭后，我又想了一下这个问题，想到了一个还不错的办法：在项目的公共头加一个外部 css，连接到一个后端地址 如：在getCssF...
vue 根据条件设置按钮的隐藏与显示
热门推荐
且听风吟的博客
10-11 1万+
<el-button v-if="isNeedAudit" size="mini" type="warning" round plain @click="auditTask"> {{ $t('common.audit') }} </el-bu...
vue使用条件渲染怎么实现通过数据的有无控制按钮的显示隐藏
weixin_35756624的博客
02-15 589
Vue可以通过使用v-if条件指令来控制数据的有无对按钮的显示与隐藏，例如：<button v-if="buttonVisible">按钮</button>，其中buttonVisible为一个布尔型的数据，当它为true时，按钮将被显示；当它为false时，按钮将被隐藏。 ...
Vue2进阶
央未见的博客
01-24 713
https://www.bilibili.com/video/BV1Zy4y1K7SH 组件化编程 1.非单文件组件 1.基本使用 第一步：创建组件 注意不需要写el，所有组件由vm管理， vm决定组件服务于哪一个容器 const school = Vue.extend({ template:``, data(){} }) 第二步：注册组件 1.全局注册，这样所有的vm都可以使用该组件 2.局部注册，这样对应的vm可以使用该组件 Vue.component('school', school
九、Vue-前端面试题库
qq_41994396的博客
05-06 305
项目的介绍, 因人而异, 可以找不同的网站, 先从网站的功能业务角度出发, 去介绍然后思考: 如果是现在让你写这样的功能页面, 你会如何实现!然后手写记录下来, 推算合理性 (遇到什么问题, 怎么解决的!),逐步完善对于项目的介绍以饿了么为例:1 基本业务介绍: 给用户提供外卖服务的2 技术栈: vue2 + vuex + vue-router + webpack + ES6/7 + axios+ sass + flex + svg定位功能选择城市搜索地址。
后端小白的Vue3新特性学习笔记
5akura's Blog
06-19 1468
文章目录Vue3写在前面一、Vite初体验二、Composition(组合式) API入门2.0、关于2.1、setup2.2、ref2.3、生命周期钩子2.4、watch监视2.5、独立的computed属性2.6、小结三、响应性3.1、什么是响应性3.2、Vue中如何实现（难）3.2.1、Vue如何跟踪数据变化Proxy（前置内容）Proxy初步认识基础示例handler.get()/set()实现数据跟踪3.3、响应性基础3.3.1、声明响应式状态3.3.2、创建独立的响应式值ref解包访问响应式对象
京东前端经典vue面试题（持续更新中）
bb_xiaxia1998的博客
02-20 254
在Vue中，对响应式处理利用的是Object.defineProperty对数据进行拦截，而这个方法并不能监听到数组内部变化，数组长度变化，数组的截取变化等，所以需要对这些操作进行hack，让Vue能监听到其中的变化。取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。简单来说就是，重写了数组中的那些原生方法，首先获取到这个数组的__ob__，也就是它的Observer对象，如果有新的值，就调用observeArray继续对新的值观察变化（也就是通过。
element ui表格中根据某列的值判断操作栏里面的按钮显示隐藏
$
06-01 5245
效果图： 这里我上通过审核意见那列的值判断操作里面的审核按钮的显示隐藏。 首先审核意见那列后台给我返回的是A、B、null三种值，然后我再将这三种值转换为已驳回、已通过、未审核。三个中文显示在页面上。 这个是通过 ：formatter属性改的，前面有讲过就不细讲了。然后如果是已通过或者已驳回审核按钮都不显示，只有是未审核的情况下才会显示审核按钮。 看代码： 核心代码： slot-scope="scope" v-if="scope.row.yzdb01D290 ==null?true:false" HTML：
vue ant 根据字段 判断一条数据 是否展示 编辑按钮
Java&Develop的博客
09-30 302
vue ant 根据字段 判断一条数据 是否展示 编辑按钮
vue+element 根据状态，显示不同的操作按钮
zhouzhiwengang的专栏
04-12 6327
效果截图： VUE 核心功能代码片段 <!--列表--> <el-table :data="hrs" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"> <el-table-column type="selection" width="55"> </el-table-column> &
vue 判断失效时间决定按钮的显示隐藏
weixin_46122878的博客
10-25 326
vue 判断失效时间决定按钮的显示隐藏
vue3 + ts + vite,自定义指令，使用权限全局控制按钮显示隐藏
m0_67624022的博客
03-28 1447
1. 创建自定义指令 在 index.ts 文件中创建自定义指令。这个指令将根据用户权限控制按钮的显示和隐藏。 2. 在main.ts中全局注册指令 在 main.ts 文件中全局注册自定义指令。 3. 在其他页面使用指令 在其他页面的模板中，使用 v-hasPermi 指令来控制按钮的显示和隐藏。例如：
Vue el-button根据条件显示与隐藏
qq_42403906的博客
10-12 1万+
'none':'' }" 控制按钮是否隐藏。'冻结' : '解除冻结' }} 控制按钮显示的样式。需求是按照delete的值来判断为冻结或者解除冻结，但是有个情况是deleted=1时不显示这个按钮。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

芝士焗红薯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值