前端开发笔记
通过接口连接拿到数据最后渲染到页面上
接口的配置
第一步 先用get方法
进行接口的请求,在此注意,接口的url
地址要配对整齐
export function doTransferAssetData(TransferAssetId) {
return request({
url: '/xxxx/xx/' + TransferAssetId,
method: 'get'
})
}
第二步 在封装一个方法,用户callback()
的方法将接口接住。注意参数ID
一定要配置的上
transferAssetData(TransferAssetId, callback) {
assetsApi.doTransferAssetData(TransferAssetId).then(res => {
callback(res)
}).catch(() => {
callback(null)
})
},
将数据极进行初步处理
将接口方法拿到手后,可以用$request
的方法,获取封装接口的方法,然后用$nextTick()
方法进行对数据的初步处理。
getOther(id) {
this.$request.transferAssetData(id, res => {
console.log(res)
this.$nextTick(() => {})
拿到数据后显示到页面上
拿数据的方式。
getOther(id) {
this.$request.transferAssetData(id, res => {
this.$nextTick(() => {
const data = res.data[0].attributeInfoList
this.form.attributeName = data
})
})
包括forEach()
方法的使用进行对数据的遍历,split
的方法可以对数据进行拆分。
// 获取多选框的value值
res.data[0].attributeInfoList.forEach(item => {
if (item.attributeFieldType === 'multiple-selection') {
this.form.checkListselection = item.attributeFieldValue.split(',')
}
})
可将接口中的两个数据进行拼接。
const data = res.data[0].attributeInfoList
this.form.attributeName = data
this.form.attributeName.forEach(item => {
// console.log(item.attributeConfigInfo.hasOwnProperty('unit'), 'item')
// 如果有unit这个元素的话 将元素重新进行拼接后显示
if (item.attributeConfigInfo.hasOwnProperty('unit')) {
item.attributeFieldValue = item.attributeFieldValue + ' ' + '(' + item.attributeConfigInfo.unit + ')'
}
})
将数据拿到网页中使用
此时已经所有数据data赋值给this.form.attributeName = data
这个数组中。下面我们将拿来在网页上写。
<!-- 单选 -->
<el-form-item :label="item.attributeName">
<div v-if="item.attributeFieldType == 'single-selection'">
<el-radio-group v-model="item.attributeFieldValue">
<el-radio disabled v-for="(radioItem, index) in item.attributeConfigInfo.selectionList" :key="index" :label="radioItem.uuid">{{radioItem.content}}</el-radio>
</el-radio-group>
</div>
</el-form-item>
1v-if
的使用:
<template>
<div v-if="type == 'A'">
A
</div>
<div v-else-if="type=='B'">
B
</div>
<div v-else>
C
</div>
</template>