总结vue实际开发过程中用到的知识点（持续更新）

引言

开始接触前端vue技术了，实际开发过程中也遇见了各种各样的小问题，用此文记录遇见的问题和解决方式。

1. 做查询订单信息的工具，想根据接口返回的数组值，动态生成列表，效果类似如图
   
   解决： 内使用 v-for 遍历接口返回的数组
   

2. 接口返回值有些字段过长，一行3个影响视觉效果，所以打算吧接口返回值的值很长的key先删除掉，最后单独按一行一个显示

   解决：有2个思路
   a. 使用computed处理数据，delete删除key
   
   b.使用 v-if，利用indexOf函数，判断不是该key的时候渲染
   

3. 使用el-descriptions组件 ，单独处理长值时，key的返回值过长了，导致超出屏幕外，不是特别长的时候会自动换行
   

   解决：用div包一层，加style属性break-all，会使el-descriptions内的文本自动换行
   

4. 单出处理的key有的长有的短，导致长的折行就很丑
   

   解决：el-description组件使用labelClassName属性定义一个class，统一加一个样式，固定一个宽度
   

   

5. 单独处理的key再没请求后端时就渲染了，期望点击按钮调用接口后再渲染
   
   解决：使用v-show，在后端返回有值后显示，即当该值当key数量大于0的时候
   

6. 同步请求接口后，在执行后面逻辑
   使用async…await 将异步请求接口变为同步请求完成后在执行后续逻辑

7. 利用v-show=‘表达式’方式来判断组建显示条件
   

8. 使用scope.row操作表单的单行数据，row值为列表中的单个对象值
   

9. 处理数据，

  数组后面添加元素  a = []， a.push() 
  数组前面添加元素 a.unshift()
  字符串截取 a=''，a.substring(0,2)
  字符串分割 a=‘’，a.split('/')
  查找数组索引 a=[]，a.findIndex（（item） => item.属性 === ' '）
  数组转字符串：a=[]，a.toString()

10. 时间戳转换

formatDate(timestamp) {
      let date = new Date(timestamp * 1000) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      const s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return Y + M + D + h + m + s
    },

11. 间隔时间，类似php的sleep函数，同步调用

sleep(numberMillis) {
      return new Promise((resolve => {
        setTimeout(() => resolve(), numberMillis)
      }))
    },
 async deployService(rowData) {
      rowData.isProcess = true
      rowData.percent = 0
      while (!rowData.isDone) {
        await this.sleep(this.deployCost)
        rowData.percent = rowData.percent + 10
}