antd design 自定义表单控件 重置不生效

<template>
  <span>
    <a-input allowClear :value="extra" @change="handleExtraChange">
      <a-tooltip slot="suffix" title="点击弹选">
        <a-icon type="search" @click="showModal" />
      </a-tooltip>
    </a-input>

    <a-modal
      :title="'请选择'+$attrs.label"
      :visible="visible"
      :width="extend.width"
      @ok="handleOk"
      @cancel="handleCancel"
      destroyOnClose
      :maskClosable="false"
    >
      <plg-form
        v-if="extend.formItems && extend.formItems.length > 0"
        :formItems="extend.formItems"
        :itemSpan="extend.itemSpan"
        ref="extraChildForm"
        :styles="{padding:0}"
        @onFinsh="onFinsh"
        @reset="onReset"
      ></plg-form>
      <plg-table
        :columns="extend.columns"
        :queryConfig="extend.queryConfig"
        ref="extraChildTable"
        :rowKey="extend.rowKey"
        @checkAction="onCheckAction"
      ></plg-table>
    </a-modal>
  </span>
</template>

<script>
import PlgTable from '@/components/PlgTable'
const PlgForm = () => import('./PlgForm')

export default {
  name: 'PItemExtra',
  props: ['value'],
  components: {
    PlgTable,
    PlgForm
  },
  data() {
    return {
      visible: false,
      extra: this.value,
      extend: this.$attrs.extend,
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  mounted() {
    console.log(this.$attrs)
  },
  watch: {
    value: function(val) {
      this.extra = val
    }
  },
  methods: {
    handleExtraChange(e) {
      const extra = e.target.value
      this.extra = extra
      this.$emit('change', extra)
    },
    showModal() {
      this.visible = true
    },
    handleOk(e) {
      this.visible = false
      this.$emit('check')
      if (this.extend.showName) {
        this.extra = this.selectedRows[0][this.extend.showName]
      }
      this.$emit('change', this.extra)
    },
    handleCancel(e) {
      this.visible = false
    },
    onFinsh(values) {
      this.$refs.extraChildTable.getTableData(values)
    },
    onReset() {
      this.$refs.extraChildTable.getTableData()
    },
    onCheckAction(selectedRowKeys, selectedRows) {
      this.$emit('checkAction', selectedRowKeys, selectedRows)
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    }
  }
}
</script>

<style lang="less" scoped>
</style>

　　

红色加粗的地方是解决办法：

原因是自定义控件，是通过 change 事件可控的更改控件的 value 值， 所以重置时也应该触发  this.extra  = this.value  (value 是 上级传入的 props)