1. 增加Card卡片后的高度渲染问题

Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM。this.$nextTick()官方介绍：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。

下面的fee-card片是通过v-for循环遍历this.arrCard得到的，通过Button按钮的add方法对this.arrCard增加一个新对象来增添卡片数量。
每次增加后要求滚动条处于页面最下侧。
不用$nextTick 的情况下，每次push完obj后，dom2.scrollHeight得到值是push前的高度，猜测可能是页面未渲染前就拿值了。
使用 $nextTick 后，dom2.scrollHeight得到值是push后的高度。

<fee-card v-for="(card,index) in arrCard"
          :key="card.markId"
          :formItem="card"
          :index="index"
          @delArrCard="delArrCard">
</fee-card>
<Button type="primary"
        long
        @click="addCard">
  <Icon type="md-add"
        size="10" />
</Button>

addCard () {
  this.markNum--
  // let obj = { id: this.markNum, name: '', select: 0, rate: 0, day: 0, money: 0 }
  let obj = {
    markId: this.markNum, // 新增标记
    iFeeId: 0, // 主表
    iPrcId: 0, // 子表
    iEntId: this.$user.entId, // 主体id
    cFeeName: '', // 收费项目名称
    iFeePd: 0, // 收费周期
    iProdId: this.prodId, // 产品
    nPrcStd: 0, // 最低标准、
    nFrstRate: 0, // 首付比例、
    iMinTerm: 0 // 最小合同周期
  }
  this.arrCard.push(obj)

  let dom1 = document.querySelector('#drawerModel1')
  let dom2 = dom1.querySelectorAll('.ivu-drawer-body')[0]
  this.$nextTick(function () {
    dom2.scrollTop = dom2.scrollHeight
  })
}