【问题总结（8）】7.15 对象数组基础

问题1. 二次录入登不上
老是跳转到主页

下面展示一些 内联代码片。

//ui-xxxx工程下 。env.development 文件

// An highlighted block
VUE_APP_SERVICE_NAME=hightech //登陆账号换成高企的 因为高企有服务

问题2. 修改a-col宽度溢出产生横向滚动条问题
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
 <a-row type="flex" :gutter="16" class="panel-group"> //将gutter="20" 修改为 16
 ....
 </a-row>

gutter （待写）

解决问题

1 分别从不同的接口调用数据

原来 api/account api/province api/city文件里对应的取得所有当前所在文件数据的接口方法都是getAll
导致在index.vue文件引入 时 有冲突
已将其修改 重命名
下面展示一些 api接口。

// api/account.js

// An highlighted block
export function getAll (parameter) {
  return request({
    url: '/api/v1/account',
    method: 'get',
    params: parameter
  })
}

下面展示一些 内联代码片。

// province

// An highlighted block
import request from '@/utils/request'

export function getAllProvinces (parameter) {
  return request({
    url: '/api/v1/province',
    method: 'get',
    params: parameter
  })
}

下面展示一些 mock测试数据。

//mock/services/account

// account
function getAll (options) {
  const data = getQueryParameters(options)
  let res = accounts
  Object.keys(data).forEach(key => {
    res = res.filter(account => account[key] === data[key])
  })
  return builder(res)
}

// mock/services/province.js

// An highlighted block
function getAllProvinces () {
  return builder(provinces)
}

Mock.mock(/\/api\/v1\/province/, 'get', getAllProvinces)

2 格式化对象数组

下面展示一些 使用map重新格式化数组中的对象。

// A code block
var foo = 'bar';

// An highlighted block
   const reformedProvinceList = provinceList.map(function (obj) {
        const reformedObj = {}
        reformedObj[obj.code] = obj.name
        return reformedObj
      })
      console.log(reformedProvinceList) // 到这一步已经将mock文件里的原始数组provinces格式化为对象数组

3 增加对象元素

下面展示一些 Object.assign(target,sources)。

// A code block
var foo = 'bar';

// An highlighted block
const object1 = { a: 1, b: 2, c: 3 }
const object2 = Object.assign({ c: 4, d: 5 }, object1)
console.log(object2)

参考: js提取对象数组中的某一个属性组成新数组.

4 两个对象数组比较： 把A数组里的值放到B数组，替换对应的value

关键：找出符合条件的索引下标。

// A code block
var foo = 'bar';

// 找出province属性值与code属性值相同时的provinceList里的索引下标 赋值给_index
for (const accountItem of accountList) {
        const _index = provinceList.findIndex(c => c.code === accountItem.province)
        console.log(_index)
        if (_index > -1) {   // 大于 -1 说明有数据 
          accountItem.province = provinceList[_index].name // 把accountList里的province属性值替换
        }
      }
      console.log(accountList)

参考: 两个对象数组之间比较是否有相同字段、数组与对象数组比较.

_index

参考: 附录: _index,_type,_id,_source元数据.

findIndex()

参考: Array.prototype.findIndex().

ES6(…)展开运算符

参考: ES6(…)展开运算符.
参考: 展开语法.

实现

下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
var foo = 'bar';