1、forceUpdate()

Vue双向数据绑定用过vue的应该都知道，双向数据绑定一般都只能用于简单数据类型的数据。那复杂类型数据该怎么办呢？

场景1：当你点击列表编辑按钮跳转详情时，需要赋值，如果是数组，赋值之后再添加发现数据有了但是页面确没有更新，或者页面更新了，input输入框却无法输入，这时候就用到了forceUpdate()方法了。

场景1：  
	// 已有值array
  array.push('')
  // 只操作了push可能会出现没有更新的现象
  this.forceUpdate()
场景2：
  // 同样如果是input输入框,如果没有效果
  @input="update"
  update () {
    this.forceUpdate()
  }

2、赋值使用

（1）当列表返回数据发现只返回code码时，传统的if/else过于繁琐

const sexJson = {
  1: '男',
  2: '女',
  3: '未知'
}
const sexCode = 1
{
  return sexJson[sexCode] // 男
}

（2）当某一个页面既是添加也是编辑页面，保存的时候需要调用两个方法，之前同样的方法需要写两次

// isAdd === true: add; false: change
import { handleAddFunc, handleChangeFunc } from '文件名'
const funcDataName = isAdd ? handleAddFunc : handleChangeFunc

funcDataName(res).then(res =>{
	// 返回逻辑
})

3、当后端返回的级联数据我们只需要前几层时

export function getTreeData (level = data.length, data = []) {
  // 循环遍历json数据
  for (let i = 0; i < data.length; i++) {
    if (data[i].children.length < 1) {
      // children若为空数组，则将children设为undefined
      data[i].children = undefined
    } else {
      // children若不为空数组，则继续 递归调用 本方法
      if (data[i].level === level) {
        data[i].children = undefined
      } else {
        getTreeData(level, data[i].children)
      }
    }
  }
  return data
}

4、导出时如果后端返回base64的数据时，我们需要将数据转换成blob

// res: 返回的base64数据

export function exportQuestionNaireRes (params) {
  return request({
    url: '/v1/export',
    method: 'POST',
    data: params,
    responseType: 'blob' // 接收文件流
  })
}

const title = '导出文件名字'
const blob = new Blob([res], {
      type:
        'application/vnd.ms-excel'
    })
    const url = window.URL.createObjectURL(blob)
    if (window.navigator.msSaveOrOpenBlob) {
      navigator.msSaveOrOpenBlob(blob, `${title}.xls`)
    } else {
      const a = document.createElement('a')
      a.href = url
      a.download = `${title}.xls`
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click()
      URL.revokeObjectURL(a.href)
      document.body.removeChild(a)
    }
})

5、当展示的数据为key: value的时候，value的长度不固定

.value {
	overflow: hidden;
  display: -webkit-box;
  white-space: break-spaces;
  word-break: break-all;
  -webkit-line-clamp: 1; /* 限制只有一行 */
  -webkit-box-orient: vertical;
}