代码review

for 滥用

// bad
const _arr = []
for (const i in data) {
  _arr.push(data[i].plat_id)
}
this.include = _arr.indexOf('5') !== -1 || _arr.indexOf('6') !== -1
this.selectAll = _arr.every((value, index) => {
  return value === '5' || value === '6'
})


// good

this.isExcept = Object.keys(data).some(el => data[el].plat_id === '5' || data[el].plat_id === '6')

for (const key in data) {
  this.isExcept = data[key].plat_id === '5' || data[key].plat_id === '6'
}

直接使用的数据，被重复强化

// bad
<el-select
  v-model="filter.plat_id"
  class="input--width"
  placeholder="全部平台类型"
>
  <el-option
    v-for="item in sysplatform"
    :key="item.key"
    :label="item.name"
    :value="item.key"
  />
</el-select>

for (const i in data) {
  const _obj = {
    name: data[i],
    key: i
  }
  this.sysplatform.push(_obj)
}
this.sysplatform = [{ name: '全部平台类型', key: '' }].concat(this.sysplatform)


// good

<el-select
  v-model="filter.plat_id"
  class="input380"
  placeholder="全部平台类型"
>
  <el-option
    v-for="(item, key) in diskType"
    :key="item+'disk'"
    :label="item"
    :value="+key"
  />
</el-select>

systemPlat: {
  0: '全部平台类型'
}

this.systemPlat = {
  ...this.systemPlat,
  ...data
}

vue模板组件写

// bad
<template slot-scope="{ row }">
  <template v-if="item.key === 'ip_list'">
    {{ row[item.key].length === 0 || row[item.key][0] === '' ? '-' : row[item.key].join(',') }}
  </template>
  <template v-else-if="item.key === 'network_use'">
    {{ row[item.key] || '-' }}
  </template>
  <template v-else>
    <span style="padding: 8px 0;">
      {{ item.filterOptions ? getName(item.filterOptions, row[item.key]): row[item.key] || '-' }}
    </span>
  </template>
</template>

getName(data, key) {
  if (!Array.isArray(data)) {
    return '-'
  }
  return data
    .filter(el => el.value === key)
    .reduce((acc, cur) => cur.name || '-', '')
}


// good
<template slot-scope="{ row }">
  <template v-if="item.render">
    {{ item.render(row[item.key], row) }}
  </template>
  <template v-else>
    {{ row[item.key] || '-' }}
  </template>
</template>


// render方法中处理
{
  key: 'network_use',
  name: '网络用途',
  width: 100,
  type: 'select',
  options: networkUsage.filter(el => el.value !== 'all'),
  render: (value) => getNameByValue(value, networkUsage)
}

for写法问题

// bad 
for (const index in data) {
  const { name, key, value } = data[index]
  const _width = '100'
  obj = [
    ...obj,
    {
      name: name,
      key: '' + key,
      width: _width,
      value: value
    }
  ]
}

// good
data.map(el => ({ ...el, width: 100 }))

代码优雅问题

// bad
data.list && data.list.forEach((item, index) => {
  let _obj = {}
  for (const i in data.list[index].asset) {
    // debugger
    const { key, value } = data.list[index].asset[i]
    _obj = {
      [key]: value
    }
    Object.assign(data.list[index], _obj)
  }
})

// good
data.list.map(el => ({
  ...el,
  ...el.asset.reduce((acc, cur) => ({ ...acc, [cur.key]: cur.value }), {})
}))