写在前言
这是一篇很简短的文章,主要是总结我平常开发的一些小技巧,如果你是大佬,就没必要再往下读了,还不如去玩2077
正文
在平常用vue写页面的时候,比如那些列表数据,table啊,list啊,tags等等这种,通过v-for循环跑出来的列表数据,
有时候我们为了看页面效果,都要在data里面自己手写一些数据进去,
如果纯手写就太浪费时间了,10条还好,假设是100条,总不能copy100次吧。
假设现在我们要开发一个表格功能,我这里使用的ui组件是ant-design-vue,从官网copy一个简单的demo下来查看他的代码,发现data是这样定义的
假设我们要给他加上100条数据,那么我们可以这么操作
const data = [...new Array(100).keys()].map((idx) => ({
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer']
}));
可以看到100条数据加载出来了
但是有个问题,每一条数据都是一样的,并且key是一样,for循环会报错,怎么解决,很简单,把idx带上去就行了
const data = [...new Array(100).keys()].map(() => ({
key: idx, // 加上idx