iview 可编辑table的 DatePicker 组件踩坑

iview 可编辑table的 DatePicker 组件踩坑
需求：

双击日期 cell 变为DatePicker 编辑日期。

DatePicker 组件没有blur事件，导致 cell 失去焦点后 不会 恢复原样。
所以只能将 open直接为true，直接打开，又导致点击多个会出现遮挡，设置变量控制只能同时打开一个，因为on-change 的执行时间在 on-open-change之后，所以如果在
on-open-change 方法中恢复cell，选择的数据就会拿不到，所以只能等选择完数据在恢复。
完整代码：

<template>
  <Row>
    <Col span="12">
      <i-table
        border
        :columns="columns1"
        :data="data1"
        highlight-row
        @on-row-click="handleSele"
        @on-row-dblclick="dbhandel"
      ></i-table>
    </Col>
    <Col span="12">
      <Card :dis-hover="true">
        <p slot="title">权限</p>
        <Tree :data="baseData" refs="show-checkbox"></Tree>
      </Card>
    </Col>
  </Row>
</template>>
<script>
  export default {
    methods: {
      handleSele(row, index) {
        row.$Edit = true
        console.log(row, index)
      },
      dbhandel(row, col, index) {},
      addTreeCheck() {
        if (this.data1.length == 0) {
          let res = ''

          for (let i = 0; i < 100; i++) {
            res += '0'
          }
          this.treeIsCheck[0] = res
        } else {
          for (let i = 0; i < this.data1.length; i++) {
            this.treeIsCheck[i] = this.data1[i].fRole
          }
        }
        console.log(this.treeIsCheck[this.selectTableRow][0] === '1')
      },
      tt(index) {
        return this.treeIsCheck[this.selectTableRow][index] === '1'
      },
      initdatalist() {
        this.data1.map(item => {
          //  item.$isEdit = false
        })
      }
    },
    mounted() {
      this.addTreeCheck(), this.initdatalist()
    },
    data() {
      return {
        f: false,

        selectTableRow: 0,
        treeIsCheck: [],
        treeIsCheck2: true,
        baseData: [
          {
            title: '考勤',

            children: [
              {
                title: '考勤管理',

                //              checked: this.treeIsCheck[this.selectTableRow][1] == '1',
                children: [
                  {
                    title: '异常考勤'
                    //                    checked: this.treeIsCheck[this.selectTableRow][2] == '1'
                  }
                ]
              },
              {
                title: '考勤管理2',
                //               checked: this.treeIsCheck[this.selectTableRow][3] == '1',
                children: [
                  {
                    title: '异常考勤2'
                    //                   checked: this.treeIsCheck[this.selectTableRow][4] == '1'
                  }
                ]
              }
            ]
          }
        ],
        columns1: [
          {
            title: '姓名',
            key: 'name'
          },
          {
            title: '日期',
            key: 'date',
            render: (h, params) => {
              if (params.row.$isEdit) {
                return h('div', [
                  h('DatePicker', {
                    props: {
                      type: 'date',
                      placeholder: 'Select date',
                      placement: 'top',
                      value: params.row.date,
                      transfer: true,
                      size: 'small',
                      editable: false,
                      open: true,
                      clearable: false
                    },

                    on: {
                      'on-change': date => {
                        params.row.date = date
                        this.data1[params.index] = date

                        this.$set(params.row, '$isEdit', false)
                        this.f = false
                      }
                    }
                  })
                ])
              } else {
                return h(
                  'div',

                  {
                    on: {
                      dblclick: () => {
                        if (!this.f) {
                          this.f = true
                          this.$set(params.row, '$isEdit', true)
                        }
                      }
                    }
                  },
                  params.row.date
                )
              }
            }
          },
          {
            title: '地址',
            key: 'address'
          }
        ],
        data1: [
          {
            name: '王小明',
            date: '2020-07-18',
            address: '北京市朝阳区芍药居',
            fRole: '0000000000000000000000000000000000000000000000000'
          },
          {
            name: '张小刚',
            date: '2020-07-18',
            address: '北京市海淀区西二旗',
            fRole: '0100000000000000000000000000000000000000000000000'
          },
          {
            name: '李小红',
            date: '2020-07-18',
            address: '上海市浦东新区世纪大道',
            fRole: '0020000000000000000000000000000000000000000000000'
          },
          {
            name: '周小伟',
            date: '2020-07-18',
            address: '深圳市南山区深南大道',
            fRole: '000100000000000000000000000000000000000000000000'
          }
        ]
      }
    }
  }
</script>

3.4.0版本后 iview 新加了 on-clickoutside 方法，点击外部关闭下拉菜单时触发 event。
这下可以直接相等于失去焦点事件了。

{
            title: '日期',
            key: 'date',
            render: (h, params) => {
              if (params.row.$isEdit) {
                return h('div', [
                  h('DatePicker', {
                    props: {
                      type: 'date',
                      placeholder: 'Select date',
                      placement: 'top',
                      value: params.row.date,
                      transfer: true,
                      size: 'small',
                      editable: false,
                      open: true,
                      clearable: false
                    },

                    on: {
                      'on-change': date => {
                        params.row.date = date
                        this.data1[params.index] = date

                        this.$set(params.row, '$isEdit', false)
                        this.f = false
                      },
                      'on-clickoutside': e =>{
                         this.f = false
                         this.$set(params.row, '$isEdit', false)
                      }
                    }
                  })
                ])
              } else {
                return h(
                  'div',

                  {
                    on: {
                      dblclick: () => {
                        if (!this.f) {
                          this.f = true
                          this.$set(params.row, '$isEdit', true)
                        }
                      }
                    }
                  },
                  params.row.date
                )
              }
            }
          },