| vue中根据后端接口数据控制按钮的显示与隐藏（手动添加响应式this.$set()） | 您所在的位置：网站首页 › vue请求接口传参数目的 › vue中根据后端接口数据控制按钮的显示与隐藏（手动添加响应式this.$set()） |
vue中根据后端接口数据控制按钮的显示与隐藏（手动添加响应式this.$set()）
|
项目涉及到的问题，按钮需要根据后端返回的参数情况，实现按钮的显示与隐藏。 效果如图：
get请求，需要传businessId和compoCode两个参数，返回的data有数据就显示按钮，没数据就隐藏按钮。
地址有了，compoCode是每个页面唯一的可直接获取，businessId是getTableData接口传过来的，所以需要先调用getTableData接口。每条数据有唯一的businessId。因为需要把数据一条条传过去（即传唯一的compoCode和唯一的businessId），而且需要在页面加载完成时就获取到所有的id（即获取不到row），所以需要先把所有的businessId放进一个数组里。 在获取表格数据的方法中，定义一个数组，把传过来的表格数据放进businessIdList中。（businessIdList需要在data中定义） getTableData () { const url = `${window.zvconfig.url.pjsyList}?coCode=${this.form.coCode}&printeryCode=${this.form.printeryCode}&search=${this.form.search}&applyStatus=${this.form.status ? this.form.status : ''}&page=${this.page}&perPage=${this.limit}` this.$axios.get(url, { headers: { compoCode: 'BM_APPLY_PASS53' } }).then(res => { if (res.data.status === '00000') { this.tableData = res.data.data.records let temp = res.data.data.records for (let i = 0; i < temp.length; i++) { this.businessIdList[i] = temp[i].id } this.isExistProcess() this.total = res.data.data.total } else { this.$Message.error(res.data.msg) } }) }, 4.地址和需要传的参数都准备好后，写接口函数。在data中定义一个existProcess，用来控制按钮的显示与隐藏。 用for循环把数据一个个传过去，如果res.data.data为真（有数据），existProcess就存在。 因为每一行数据用的是同一个按钮，所以需要把existProcess是否存在也用数组存起来。所以如果res.data.data为真（有数据），this.existProcess[i] = 'exist'。 isExistProcess () { for (let i = 0; i < this.businessIdList.length; i++) { const url = `${window.zvconfig.url.isExistProcess}?compoCode=BM_APPLY_PASS53&businessId=${this.businessIdList[i]}` this.$axios.get(url, { headers: { compoCode: 'BM_APPLY_PASS53' } }).then(res => { if (res.data.status === '00000') { if (res.data.data) { this.existProcess[i] = 'exist' this.updateProcessExist(i, 'exist') // 添加响应式属性 } else { this.existProcess[i] = 'noExist' this.updateProcessExist(i, 'noExist') } console.log(this.existProcess) } else { this.$Message.error(res.data.msg) } }) } }, 5.控制按钮的显示与隐藏所以this.existProcess[i] 为'exist'时，按钮应该显示，this.existProcess[i] 为'noExist'时，按钮隐藏。所以按钮的v-if判断条件为v-if="existProcess[index] === 'exist'"。 6.问题这种情况下会发现按钮并没有显示，是因为值虽然获取了，但是由于vue2的局限性，数组数据和对象属性是非响应式的。axios异步任务结束后，基本页面就渲染完成。这时候虽然数组的值变了，但是模板元素不知道，所以没有重新渲染。 解决办法如下： 1.手动给数组的元素添加响应式 this.$set() 2.每有一个值赋上之后，用this.$forceUpdate强刷 3.所有值赋完了之后，用forceupdate强刷 forceupdate方法使用之后发现还是没有效果，原因未知，可能是因为forceupdate只能影响slot，影响不到slot的子组件。 手动给数组的元素添加响应式 this.$set()的方法 this.$set(需要添加响应式属性的数组，下标，值) // 添加响应式属性的方法 updateProcessExist (index, value) { this.$set(this.existProcess, index, value) }在需要使用$set方法的地方应用，当existProcess[i]为'exist'时，更新为'exist'7 // 应用 isExistProcess () { for (let i = 0; i < this.businessIdList.length; i++) { const url = `${window.zvconfig.url.isExistProcess}?compoCode=BM_APPLY_PASS53&businessId=${this.businessIdList[i]}` this.$axios.get(url, { headers: { compoCode: 'BM_APPLY_PASS53' } }).then(res => { if (res.data.status === '00000') { if (res.data.data) { this.existProcess[i] = 'exist' this.updateProcessExist(i, 'exist') // 添加响应式属性 } else { this.existProcess[i] = 'noExist' this.updateProcessExist(i, 'noExist') } console.log(this.existProcess) } else { this.$Message.error(res.data.msg) } }) } }, 7.成功实现需求总结： 1.如果需要根据行内参数来判断按钮是否显示，只需要row.xxx。 2.如果需要传参数过去判断一个按钮的显示与隐藏，且不需要在页面一加载就进行判断，可以通过点击按钮进行接口调用，再通过row获取参数传给后端进行接口判断。 3.如果需要在页面加载完成后就进行判断，需要写在mounted里面，需要通过接口获取参数不能直接在页面上获取。 4.在页面加载完成后，再修改数组和对象中的参数，是非响应式的，需要手动添加响应式。 5.希望接口和需求不要再改了，整的这么麻烦结果后来又改成一个简单的接口真的会让人很无语。 |
【本文地址】