前端知识点:

139 阅读1分钟

表单知识点

- clearable,是输入框右边的小×,表示清除内容;

  • @keyup.enter.native="handleQuery",在输入框里放这个,按回车键就可以搜索;

map的用法

1.取一个数组里面的对象的某一个键值对,并使其变成一个数组

[   
	{"txt":"09:00-12:00","codId":"1","flgDel":"0","id":1},
	{"txt":"13:00-16:00","codId":"1","flgDel":"0","id":2},
	{"txt":"18:00-20:00","codId":"1","flgDel":"0","id":3}
]

要使用的是

['09:00-12:00', '13:00-16:00', '18:00-20:00']

用map来写出来

let time = data.map(item=>item.txt)
console.log(time)
//控制台输出如下 
//['09:00-12:00', '13:00-16:00', '18:00-20:00']

2. 取给定数组的某些字段重命名并组成新数组

新的接口传来data(json):

[  //新data数据
{"txt":"拜访","flgDel":"0","id":1},
{"txt":"面试","flgDel":"0","id":2},
{"txt":"其他","flgDel":"0","id":3}
]

前台使用数组结构:

[{ name: '拜访' }, { name: '面试' }, { name: '其他' }]
//这里看到相比于案例一有字段了,还新命名了

//只需一行map()
let resion = data.map(item =>({name: item.txt}))
console.log(resion) 
//控制台输出
//[{ name: '拜访' }, { name: '面试' }, { name: '其他' }]

当然,或许你要的这样⬇ :

[{ name: '拜访',id:'1' }, { name: '面试',id:'2' }, { name: '其他',id:'3'}]
//要两个字段的数据
let resion2 = data.map(item =>({name: item.txt, id: item.id}))
console.log(resion2) 
//控制台输出
//[{ name: '拜访',id:'1' }, { name: '面试',id:'2' }, { name: '其他',id:'3'}]

又或许你想要这样⬇ :

[{ name: '拜访1' }, { name: '面试2' }, { name: '其他3'}]
//要拼接的数据

let resion3 = data.map(item =>({name: item.txt + item.id}))
console.log(resion3) 
//控制台输出
//[{ name: '拜访1' }, { name: '面试2' }, { name: '其他3'}]
//这数据看着好奇怪,没这么用的。我只想说map()可这么用😁,还有更多等我们一起探索