Vue异步加载数组以及v-for按列渲染table

Vue异步加载数组以及v-for按列渲染table

一、异步加载数组

老生常谈的话题了,这次照样是由于直接使用赋值导致Vue无法监听到数组元素的改变从而无法响应式更新视图层数据,因此还是通过push()方法将JSON获取到的数组push进属性中的数组中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var equiInfo = new Vue({
el: '#equ-info',
data: {
theMenName: [],
theEquNo: [],
theEquName: [],
theEquKind: [],
theEquEndDate: []
},
created() {
var _this = this;
axios.get(equipUrl).then(function (res) {
let data = res.data;
_this.theMenName.push(data.theMenName);
_this.theEquNo.push(data.theEquNo);
_this.theEquName.push(data.theEquName);
_this.theEquKind.push(data.theEquKind);
_this.theEquEndDate.push(data.theEquEndDate);
})
}
})

在这里遇见了一个小坑,由于then内的function(res){} 是闭包,所以在function 内部this的指向的是全局对象也就是window,所以得在外部声明一个变量_this 指向外部函数的this

二、v-for按列渲染table

这里由于后端给的是一个这样的JSON数据:
{theEquName: Array(3), theEquNo: Array(3), theEquEndDate: Array(3), theMenName: Array(3), theEquKind: Array(3)} 因此是一个二维的数组,需要进行遍历,于是在HTML中这样写:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<tbody id="equ-info">
<td v-for="item in theMenName" >
<template v-for="data in item">
<tr>{{data}}</tr>
</template>
</td>
<td v-for="item in theEquNo" :key="data">
<template v-for="data in item">
<tr :key="data">{{data}}</tr>
</template>
</td>
<td v-for="item in theEquName" :key="data">
<template v-for="data in item">
<tr :key="data">{{data}}</tr>
</template>
</td>
<td v-for="item in theEquKind" :key="data">
<template v-for="data in item">
<tr :key="data">{{data}}</tr>
</template>
</td>
<td v-for="item in theEquEndDate" :key="data">
<template v-for="data in item">
<tr :key="data">{{data}}</tr>
</template>
</td>
</tbody>

不过这样的话,:key由于有相同的,vue会报错,接下来将对这个进行优化,确保每个key都是唯一的。
最终效果如下:
table.png