iView（View UI）表单使用指南

iView（View UI）表单使用指南

iView（现更名为 View UI Plus）是 Vue.js 的 UI 组件库，支持强大的表单功能。以下是 iView 表单的常见用法：

---

1. 基本表单

<template>
  <Form ref="form" :model="formData" :rules="rules" label-width="80px">
    <FormItem label="用户名" prop="username">
      <Input v-model="formData.username" placeholder="请输入用户名" />
    </FormItem>

    <FormItem label="密码" prop="password">
      <Input type="password" v-model="formData.password" placeholder="请输入密码" />
    </FormItem>

    <FormItem>
      <Button type="primary" @click="handleSubmit">提交</Button>
    </FormItem>
  </Form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: '',
      },
      rules: {
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log('提交表单数据:', this.formData);
        } else {
          console.log('表单验证失败');
        }
      });
    },
  },
};
</script>

说明：

• Form 组件用于创建表单
• FormItem 绑定 prop 用于校验
• rules 定义表单验证规则
• validate 方法校验表单数据

---

2. 复杂表单（包含下拉框、单选、多选、日期等）

<template>
  <Form ref="form" :model="formData" :rules="rules" label-width="100px">
    <FormItem label="姓名" prop="name">
      <Input v-model="formData.name" placeholder="请输入姓名" />
    </FormItem>

    <FormItem label="性别" prop="gender">
      <RadioGroup v-model="formData.gender">
        <Radio label="男">男</Radio>
        <Radio label="女">女</Radio>
      </RadioGroup>
    </FormItem>

    <FormItem label="兴趣爱好">
      <CheckboxGroup v-model="formData.hobbies">
        <Checkbox label="阅读" />
        <Checkbox label="旅行" />
        <Checkbox label="运动" />
      </CheckboxGroup>
    </FormItem>

    <FormItem label="城市" prop="city">
      <Select v-model="formData.city" placeholder="请选择城市">
        <Option value="shanghai">上海</Option>
        <Option value="beijing">北京</Option>
        <Option value="shenzhen">深圳</Option>
      </Select>
    </FormItem>

    <FormItem label="生日" prop="birthday">
      <DatePicker v-model="formData.birthday" type="date" placeholder="请选择日期" />
    </FormItem>

    <FormItem>
      <Button type="primary" @click="handleSubmit">提交</Button>
    </FormItem>
  </Form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        gender: '',
        hobbies: [],
        city: '',
        birthday: '',
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        city: [{ required: true, message: '请选择城市', trigger: 'change' }],
        birthday: [{ required: true, message: '请选择生日', trigger: 'change' }],
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log('提交成功', this.formData);
        } else {
          console.log('表单验证失败');
        }
      });
    },
  },
};
</script>

---

3. 动态添加/删除表单项

<template>
  <Form ref="form" :model="formData" label-width="100px">
    <FormItem v-for="(item, index) in formData.users" :key="index" :label="'用户 ' + (index + 1)">
      <Input v-model="item.name" placeholder="请输入用户名" />
      <Button type="error" @click="removeUser(index)">删除</Button>
    </FormItem>

    <FormItem>
      <Button type="dashed" @click="addUser">添加用户</Button>
    </FormItem>

    <FormItem>
      <Button type="primary" @click="handleSubmit">提交</Button>
    </FormItem>
  </Form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        users: [{ name: '' }],
      },
    };
  },
  methods: {
    addUser() {
      this.formData.users.push({ name: '' });
    },
    removeUser(index) {
      this.formData.users.splice(index, 1);
    },
    handleSubmit() {
      console.log('提交数据:', this.formData);
    },
  },
};
</script>

功能说明：

• users 数组存储多个用户输入框