Form 表单

表单组件由输入框、单选框、多选框、计数器等组件组成

基础用法

立即创建 取消

在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括Input、Checkbox、Radio、button

<template>
  <div class="pd-form-container">
    <pd-form ref="form" :model="formdata" label-width="80px">
      <pd-form-item label="活动名称">
        <pd-input
          placeholder="请输入活动名称"
          v-model="formdata.name"
          clearable
        ></pd-input>
      </pd-form-item>

      <pd-form-item label="活动人数">
        <pd-input-number
          v-model="formdata.count"
          :min="1"
          :max="100"
        ></pd-input-number>
      </pd-form-item>
      <pd-form-item label="活动性质">
        <pd-checkbox-group v-model="formdata.type">
          <pd-checkbox label="美食餐厅线上活动"></pd-checkbox>
          <pd-checkbox label="地推活动"></pd-checkbox>
          <pd-checkbox label="线下主题活动"></pd-checkbox>
        </pd-checkbox-group>
      </pd-form-item>
      <pd-form-item label="特殊资源">
        <pd-radio-group v-model="formdata.resource">
          <pd-radio value="线上品牌商赞助" label="线上品牌商赞助"></pd-radio>
          <pd-radio value="线上品牌商赞助" label="线下场地免费"></pd-radio>
        </pd-radio-group>
      </pd-form-item>
      <pd-form-item label="活动形式">
        <pd-input
          type="textarea"
          v-model="formdata.desc"
          placeholder="请输入活动形式"
        ></pd-input>
      </pd-form-item>

      <pd-form-item>
        <pd-button type="primary">立即创建</pd-button>
        <pd-button>取消</pd-button>
      </pd-form-item>
    </pd-form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        formdata: {
          name: "",
          type: ["线下主题活动"],
          resource: "",
          desc: "",
          count: 1,
          pics: [],
        },
      };
    },
  };
</script>

显示代码 复制代码 复制代码

表单验证

立即创建 取消

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

<template>
  <div class="pd-form-container">
    <pd-form ref="form" :model="formdata" :rules="rules" label-width="80px">
      <pd-form-item label="活动名称" prop="name">
        <pd-input
          placeholder="请输入活动名称"
          v-model="formdata.name"
          clearable
        ></pd-input>
      </pd-form-item>

      <pd-form-item label="活动人数" prop="count">
        <pd-input-number
          v-model="formdata.count"
          :min="1"
          :max="100"
        ></pd-input-number>
      </pd-form-item>
      <pd-form-item label="活动性质" prop="type">
        <pd-checkbox-group v-model="formdata.type">
          <pd-checkbox label="美食餐厅线上活动"></pd-checkbox>
          <pd-checkbox label="地推活动"></pd-checkbox>
          <pd-checkbox label="线下主题活动"></pd-checkbox>
        </pd-checkbox-group>
      </pd-form-item>
      <pd-form-item label="特殊资源" prop="resource">
        <pd-radio-group v-model="formdata.resource">
          <pd-radio value="线上品牌商赞助" label="线上品牌商赞助"></pd-radio>
          <pd-radio value="线上品牌商赞助" label="线下场地免费"></pd-radio>
        </pd-radio-group>
      </pd-form-item>
      <pd-form-item label="活动形式" prop="desc">
        <pd-input
          type="textarea"
          v-model="formdata.desc"
          placeholder="请输入活动形式"
        ></pd-input>
      </pd-form-item>

      <pd-form-item>
        <pd-button type="primary" @click="submit">立即创建</pd-button>
        <pd-button>取消</pd-button>
      </pd-form-item>
    </pd-form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        formdata: {
          name: "",
          type: ["线下主题活动"],
          resource: "",
          desc: "",
          count: 1,
          pics: [],
        },
        rules: {
          name: [
            { required: true, message: "请输入活动名称", trigger: "blur" },
          ],
          desc: [
            { required: true, message: "请填写活动形式", trigger: "blur" },
          ],
          type: [
            {
              type: "array",
              required: true,
              message: "请至少选择一个活动性质",
              trigger: "change",
            },
          ],
          resource: [
            {
              required: true,
              message: "请至少选择一个活动资源",
              trigger: "change",
            },
          ],
          pics: [
            {
              type: "array",
              required: true,
              message: "请至少选择一张活动照片",
              trigger: "change",
            },
          ],
        },
      };
    },
    methods: {
      submit() {
        // 表单校验
        this.$refs.form.validate((valid) => {
          if (valid) {
            alert("校验成功");
          } else {
            alert("校验失败");
            return false;
          }
        });
      },
    },
  };
</script>

显示代码 复制代码 复制代码