es6项目使用

1.判断条件同时包含值

[1, 4].includes(this.settleDetail.settleBillType)

2.查找是否有包含条件的值
// 获取枚举公共函数

getCommissionType(data, type) {
  const current = data.find(item => item.type === type)
  return current ? current.values : []
}

3.数组遍历

Object.keys(typeLib).forEach(() => {
    if (incomeType) {
      typeLib[incomeType].forEach((item) => {
        if (item.billType === billType) {
          type = item.type
        }
      })
    }
})

4.判断对象中如果没有值，则删除key

Object.keys(params).forEach((key) => {
    if (!params[key]) {
      delete params[key]
    }
})

5.解构赋值

//解构赋值
const { searchParams = {} } = this.$refs.billSearchRef
this.searchParams = searchParams
//三点运算符使用
const { data = [] } = await this.$api[this.tableForm[this.type]]({
  ...this.searchParams,
  ...this.page
})

6.判断是否是数组

Array.isArray(item.value)

7.slot-scope使用

<el-table :data="relatedList" border>
    <el-table-column
      v-for="(item, index) in relatedTable.slice(2)"
      :key="index"
      :width="item.width || ''"
      :fixed="item.fixed"
      :prop="item.prop"
      align="center"
      :label="item.label"
    >
      <template slot-scope="scope">
        <template v-if="item.scoped && item.prop === 'operate'">
          <el-button type="primary" size="small" @click="bindViewDetail(scope.row)">查看明细</el-button>
          <el-button type="danger" size="small" @click="bindRemoveBtn">删除</el-button>
        </template>
        <span v-else>{{ scope.row[item.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
  

8.substr与substring区别

substr(start,length)
substring(start,end)
console.log('2021.08.04'.substr(2, 6))
21.08.
console.log('2021.08.04'.substring(2, 6))
21.0

9.动态添加class

:class="['pending', { 'hidden-bottom': showBottomArea}]"

10.promise用法

loadPlayer () {
  return new Promise((resolve, reject) => {
    if (!this.options.videoId && !this.options.videoSrc) {
      throw Error('缺少videoId或者videoSrc')
    }

    if (window.tvp) {
      return resolve(window.tvp)
    }
    const path = 'https://imgcache.qq.com/tencentvideo_v1/tvp/js/tvp.player_v2.js'
    const oScript = document.createElement('script')
    const oHead = document.getElementsByTagName('head')[0]
    oScript.type = 'text/javascript'
    oScript.src = path
    oHead.appendChild(oScript)
    oScript.onload = () => {
      resolve(window.tvp)
    }
  })
}

promise.all
Promise.all([...filter, this.$refs.base.validate()]).then(() => {
  this.saveCommission()
}).catch(() => {})

11.async await用法

async searchShort(params) {
  this.loadingInstance(true)
  try {
    const [a, b] = await Promise.all([this.$api.queryAutoShortInsurance(params), this.$api.queryHandShortInsurance(params)])
    this.shortOption.data = [{
      ...a.data.detail,
      ...b.data.detail
    }]
  } catch (error) {
    this.$sentryLog(error)
    this.$message.error(error.msg || '系统错误')
  } finally {
    this.loadingInstance(false)
  }
},
async searchLong(params) {
  this.loadingInstance(true)
  try {
    const { data } = await this.$api.queryLongInsurance(params)
    this.longOption.data = [data.detail]
  } catch (error) {
    this.$sentryLog(error)
    this.$message.error(error.msg || '系统错误')
  } finally {
    this.loadingInstance(false)
  }
}

12.处理数组套对象，获取其中的value值

let myMap = [{
  desc: "产品基础信息",
  value: "productBasic"
},{
  desc: "保障方案",
  value: "productPlan"
},{
  desc: "费率表",
  value: "configCalculate"
}]
//解构赋值
let myMapData = myMap.map(({value}) => value)
//["productBasic", "productPlan", "configCalculate"]

13.查找数组中对象的下标值
const index = arr.findIndex(item => item.status === 1)

14.查找数组中符合条件的元素
const item = arr.find(item => item.status === 1)

15.不同数据格式处理

 map对象格式：
 <div v-for="(val, i) in data" :key="i">
    {{i}}----map的key值（BYWJS-20210511-0185）
    <div v-for="(item, key) in data[i]" :key="key">
      {{item}}----key对应的value值
      <manage-step ref="manageStep" :currentStep="item" :stepOA="i" />
    </div>
</div>
      data = {
        'BYWJS-20210511-0185': [
          {
            approveNodeName: '发起',
            approveUser: '郑栋文/zhengdongwen',
            approveTime: '2021-05-11 19:24:56',
            approveStatus: '审批通过',
            approveContent: ''
          }, {
            approveContent: '同意',
            approveNodeName: '2-申请人',
            approveStatus: '审批通过',
            approveTime: '2021-05-12 19:23:46',
            approveUser: '郑栋文/zhengdongwen'
          }, {
            approveContent: '驳回',
            approveNodeName: '3-申请人',
            approveStatus: '审批驳回',
            approveTime: '2021-05-12 19:23:46',
            approveUser: '郑栋文/zhengdongwen'
          }
        ],
        'BYWJS-20210511-0182': [
          {
            approveNodeName: '成功',
            approveUser: '郑栋文/zhengdongwen',
            approveTime: '2021-05-11 19:24:56',
            approveStatus: '审批通过',
            approveContent: ''
          }, {
            approveContent: '驳回',
            approveNodeName: '3-申请人',
            approveStatus: '审批w',
            approveTime: '2021-05-12 19:23:46',
            approveUser: '郑栋文/zhengdongwen'
          }, {
            approveContent: '驳回',
            approveNodeName: '3-申请人',
            approveStatus: '审批驳回',
            approveTime: '2021-05-12 19:23:46',
            approveUser: '郑栋文/zhengdongwen'
          }, {
            approveContent: '驳回',
            approveNodeName: '3-申请人',
            approveStatus: '审批驳回',
            approveTime: '2021-05-12 19:23:46',
            approveUser: '郑栋文/zhengdongwen'
          }, {
            approveContent: '驳回',
            approveNodeName: '3-申请人',
            approveStatus: '审批驳回',
            approveTime: '2021-05-12 19:23:46',
            approveUser: '郑栋文/zhengdongwen'
          }
        ]
      }
      //eslint-disable-next-line
      // for (const key in data) {
      //   const value = data[key]
      //   if (value && Array.isArray(value)) {
      //     this.currentSettleLog = value
      //   }
      // }

16.查找到所有数组中含有某元素的对象集合

const arr = [{
 companyId: 13526180,
 policyPrefix: "a143888888"
}, {
 policyPrefix: "a143888881"
}, {
 policyPrefix: "a143888882"
}]
const current = params.filter(item => item.companyId)
        console.log(current)// [{
 companyId: 13526180,
 policyPrefix: "a143888888"
}]

17.