Vue+iView实战及跳坑总结

1、iView的Tooltip设置显示位置偏移量

在官方文档中，Tooltip显示文本可以自由的设置显示方向，但是偏移量设置官方API只给出了一个offset属性，默认值为0，类型为number。并无具体示例。经过测试，offset可以接受两个值，具体如下：

• offset 属性：
  • 一个值：表示水平偏移。正值向右偏移，负值向左偏移
  • 两个值：第一个值表示水平偏移，第二个表示垂直偏移。正值向右向上，负值向左向下

// 表示向左偏移20px，向上偏移20px

  

2、iView中DatePicker必填校验问题

• 问题

DatePicker的表单项作为必填字段进行校验时，在修改赋值的时候，无法通过必填校验

• 解决

3、在vue模板中遍历拼接动态唯一属性

• 方式一：使用字符串拼接

  
测试

• 方式二：使用filters过滤器

  
测试

// ...
filters: {
  test(index) {
    return 'id_' + index
  }
}

• 方式三：使用methods

  
测试

  // ....
methods: {
  test(index) {
    return 'id_' + index
  }
}

4、watch监听对象属性

在vue中可以使用watch监听data中的属性，如果需要监听对象的属性，可以使用如下方式：

  data() {
    return {
      formData: {
        phone: ''
      }
    }
  },
  watch: {
    'formData.phone':function(val,oldValue) {
      // ....
    }
  }

5、格式化iView的DatePicker组件返回数据

在表单中使用DatePicker返回数据时国际标准时间的格式，即:"2019-12-11T16:00:00.000Z",但在提交表单的时候需要正常的格式，可以在on-change时间中做如下处理：

• 方式一

  

// 返回结果："2019/11/11 00:00"

• 方式二：

  

// ....
methods: {
  handleChange(time,type) {
    this.contractFormDatas.signTime = time
  }
}

6、解析树结构数据，拼接成Tree组件所需格式

export const getTree = (tree = []) => {
  let arr = []
  if (!!tree && tree.length !== 0) {
    tree.forEach(item => {
      let obj = {}
      obj.title = item.departName
      obj.expand = true
      obj.departmentId = item.nodeId
      obj.children = getTree(item.children)
      arr.push(obj)
    })
  }
  return arr
}