关于form表单的vue2写法

<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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在uniapp中,可以使用Vue3的Composition API来编写表单。具体步骤如下: 1. 在setup函数中定义表单数据和表单验证规则: ``` import { ref } from 'vue' export default { setup() { const formData = ref({ username: '', password: '' }) const rules = { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' } ] } return { formData, rules } } } ``` 2. 在模板中使用uni-form组件来渲染表单: ``` <template> <view> <uni-form :model="formData" :rules="rules"> <uni-form-item label="用户名" prop="username"> <uni-input v-model="formData.username" placeholder="请输入用户名"></uni-input> </uni-form-item> <uni-form-item label="密码" prop="password"> <uni-input v-model="formData.password" type="password" placeholder="请输入密码"></uni-input> </uni-form-item> <uni-form-item> <uni-button type="primary" @click="submitForm">提交</uni-button> </uni-form-item> </uni-form> </view> </template> ``` 3. 在methods中定义submitForm方法来提交表单: ``` import { ref } from 'vue' import { useForm } from '@ant-design-vue/use' export default { setup() { const formData = ref({ username: '', password: '' }) const rules = { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' } ] } const { validate } = useForm(formData, rules) const submitForm = () => { validate().then(() => { // 表单验证通过,可以提交表单 }).catch(() => { // 表单验证不通过,不提交表单 }) } return { formData, rules, submitForm } } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值