map数据处理

最新推荐文章于 2023-03-07 11:52:45 发布

置顶深圳最菜的前端

最新推荐文章于 2023-03-07 11:52:45 发布

阅读量306

点赞数

分类专栏：学习笔记文章标签： js html vue.js javascript

本文链接：https://blog.csdn.net/qq_34451048/article/details/105855735

版权

学习笔记专栏收录该内容

80 篇文章 0 订阅

订阅专栏

vue-element-admin最常见的一个需求，就是列表显示，将后台返回的数据渲染到页面

之前写过一次，现在重新改造一下，用于记录
《一》最初版

listPageStore(this.currentPage, this.pageSize).then(resp=>{
          if(resp.errCode == 0) {
            this.tableData= resp.data.stores.map(res=>{
              if(res.province == null){
                res.province = ''
              }
              if(res.city == null) {
                res.city = ''
              }
              if (res.district == null) {
                res.district = ''
              }
              res.Provinces = `${res.province && res.province.name}${res.city && res.city.name}${res.district && res.district.name}`
              if (res.status == 1) {
                res.statusStr = '开店'
              } else {
                res.statusStr = '关店'
              }
              return res
            })
          }
        })

因为后台返回的province ， city，district这三个字段，是省市区，但是这三个字段可能有数据有可能没有数据，但是前端是需要的是下面的name字段，如果判断，那么打点调用name的时候，map就会报错，所以最麻烦的写法，就是每个去做一层判断，然后用末班字符串做拼接

《二》改造一下

listPageStore(this.currentPage, this.pageSize).then(resp=>{
	if(resp.errCode == 0) {
		let stores = resp.data.stores || []
        this.tableData = stores.map(res => {
            res.province === null && (res.province = {}) && (res.province.name = '')
            res.city === null && (res.city = {}) && (res.city.name = '')
            res.district === null && (res.district = {}) && (res.district.name = '')
            res.Provinces = `${res.province.name}${res.city.name}${res.district.name}`
            res.status == 1 ? res.statusStr = '开店' : res.statusStr = '关店'
            return res
        })
	}
})

运用一些三元表达式，去替代if的判断，但是看起来还是很繁琐，再优化一下

《三》优化

listPageStore(this.currentPage, this.pageSize).then(resp=>{
          if(resp.errCode == 0) {
            let stores = resp.data.stores || []
            this.tableData = stores.map(res => {
                res.Provinces = `${res.province ? res.province.name : ''}${res.city ? res.city.name : ''}${res.district ? res.district.name : ''}`
                res.status == 1 ? res.statusStr = '开店' : res.statusStr = '关店'
                return res
            })
          }
        })

《四》再优化一下

listPageStore(this.currentPage, this.pageSize).then(resp=>{
          if(resp.errCode == 0) {
            let stores = resp.data.stores || []
            this.tableData = stores.map(res => {
            	...res
                Provinces : `${res.province ? res.province.name : ''}${res.city ? res.city.name : ''}${res.district ? res.district.name : ''}`
                statusStr : res.status == 1 ? '开店' : '关店'
                return res
            })
          }
        })