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

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

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

// 表示向左偏移20px，向上偏移20px
<Tooltip placement="top" offset='-20, 20' content='我是显示文字'>
  <img :src="item.menuIcon">
</Tooltip>

2、iView中DatePicker必填校验问题

• 问题

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

• 解决

<template>
  <div>
    <Form
      ref="formValidate"
      :model="contractFormDatas"
      :rules="ruleValidate"
      label-position="top"
      inline>
      <FormItem label="签署日期" prop="signTime">
        <DatePicker 
          v-model.trim="contractFormDatas.signTime" 
          type="date"
          placeholder="请选择签署日期"
          clearable
          @on-change='contractFormDatas.signTime=$event'></DatePicker>
      </FormItem>
    </Form> 
  </div>
</template>
<script >
  export default {
    data() {
      return {
        contractFormDatas: {
          signTime: ''
        },
        ruleValidate: {
          // 设置pattern: /.+/时，修改赋值的时候，可通过校验
          signTime: [
            { required: true, message: "请选择签署日期", trigger: "change",pattern: /.+/}
          ]
        }
      }
    }
  }
</script >

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

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

<div v-for="(item,index) in list" :key='index'>
  <div :id="'id_' + index ">测试</div>
</div>

• 方式二：使用filters过滤器

<div v-for="(item,index) in list" :key='index'>
  <div :id="index | format">测试</div>
</div>
// ...
filters: {
  test(index) {
    return 'id_' + index
  }
}

• 方式三：使用methods

<div v-for="(item,index) in list" :key='index'>
  <div :id="test(index)">测试</div>
</div>
  // ....
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时间中做如下处理：

• 方式一

<FormItem label="签署日期" prop="signTime">
  <DatePicker 
    v-model.trim="contractFormDatas.signTime" 
    type="date"
    placeholder="请选择签署日期"
    clearable
    @on-change='contractFormDatas.signTime=$event'></DatePicker>
</FormItem>
// 返回结果："2019/11/11 00:00"

• 方式二：

<FormItem label="签署日期" prop="signTime">
  <DatePicker 
    v-model.trim="contractFormDatas.signTime" 
    type="date"
    placeholder="请选择签署日期"
    clearable
    @on-change='handleChange'></DatePicker>
</FormItem>
// ....
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
}