About how to write vue2 form form

<template>
  <el-dialog title="供应商登记" :visible.sync="dialogFormVisible" width="600px" class="component-dialog">
    <el-form ref="validateForm" :model="form" :label-width="isMobile ? 90 : formLabelWidth">
      <el-form-item
        prop="supplier"
        label="供应商名称"
        :rules="[
          { required: true, message: '请输入供应商名称', trigger: 'blur' },
        ]"
      >
        <el-input v-model="form.supplier" maxlength="200" autocomplete="off" />
      </el-form-item>
      <el-form-item
        prop="contactPerson"
        label="联系人"
        :rules="[
          { required: true, message: '请输入联系人', trigger: 'blur' },
        ]"
      >
        <el-input v-model="form.contactPerson" maxlength="200" autocomplete="off" />
      </el-form-item>
      <el-form-item
        prop="contactPhone"
        label="联系电话"
        :rules="[
          { required: true, message: '请输入联系电话', trigger: 'blur' },
        ]"
      >
        <el-input v-model="form.contactPhone" maxlength="200" autocomplete="off" />
      </el-form-item>
      <el-form-item
        prop="address"
        label="所在地"
        :rules="[
          { required: true, message: '请选择所在地', trigger: 'change' },
        ]"
      >
        <el-cascader v-model="form.address" style="width: 100%" :options="list" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">提 交</el-button>
      <el-button type="info" @click="closeDialog">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
function defaultForm() {
  return {
    // 供应商名称
    supplier: '',
    // 联系人
    contactPerson: '',
    // 联系电话
    contactPhone: '',
    // 所在地
    address: ''
  }
}
export default {
  name: 'BecomeSupplier',
  props: {
    value: Boolean
  },
  data() {
    return {
      form: defaultForm(),
      formLabelWidth: '120px',
      isMobile: false,
      list:[]
   }
  },
  computed: {
    dialogFormVisible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    value(val) {
      this.$nextTick(() => {
        val && this.$refs.validateForm.clearValidate()
      })
    }
  },
  mounted() {
    this.bindComputedFn = this.bindComputed.bind(this)
    this.bindComputedFn()
    window.addEventListener('resize', this.bindComputedFn)
  },
  unmounted() {
    window.removeEventListener('resize', this.bindComputedFn)
  },
  methods: {
    closeDialog() {
      this.dialogFormVisible = false
    },
    submit() {
      this.$refs.validateForm.validate((valid) => {
        if (valid) {
          const address = this.getAddress()
          // todo 提交
          console.log({
            ...this.form,
            address
          })
          this.closeDialog()
          this.form = defaultForm()
        } else {
          return false
        }
      })
    },
    getAddress() {
      let result = ''
      const splitStr = '-'
      if (this.form.address && this.form.address.length) {
        this.form.address.reduce((final, next) => {
          const current = final.reduce((f, n) => {
            return n.value === next ? n : f
          })
          result += splitStr + current.label
          return current.children
        }, this.list)
      }
      return result.replace(new RegExp('^' + splitStr), '')
    },
    bindComputed: function(e) {
      const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
      this.isMobile = width <= 800
    }
  }
}
</script>

<style scoped lang="less">
@import "@/styles/media.less";
.forMobile({
  .component-dialog {
    /deep/ .el-dialog {
      max-width: 90%!important;
    }
  }
});
</style>