🚀前言

在现代 web 应用中，表单是与用户交互的重要部分。无论是在注册、登录，还是在填写信息和提交反馈时，表单的设计和功能都直接影响着用户体验。Element Plus 作为一款专为 Vue 3 设计的 UI 组件库，提供了一系列强大而灵活的表单类组件，帮助开发者轻松创建功能丰富、用户友好的表单界面。

本篇文章将重点介绍 Element Plus 中的表单类组件，通过具体示例深入分析这些组件的使用方法和应用场景。我们将涵盖常用的表单组件，包括输入框（Input）、选择器（Select）、单选框（Radio）、复选框（Checkbox）、日期选择器（DatePicker）等，结合实际代码示例，帮助你快速掌握如何在项目中有效地使用这些组件。

在每个示例中，我们将讨论组件的基本用法、常见属性、事件处理及验证规则等，确保你能够灵活应对不同的开发需求。此外，我们还会探讨如何通过自定义样式和主题来提升表单的视觉效果，让它更符合你的项目风格。

🚀一、Element Plus表单类组件示例

🔎1.单选框与多选框

<script setup>
import {ref} from  'vue'
const radio = ref("0")
const radio2 = ref("1")
const city = ref("1")
const checkBox = ref(["1"])
const checkBox2 = ref(["1"])
</script>

<template>
<div>
    <el-radio v-model="radio" value="0">男</el-radio>
    <el-radio v-model="radio" value="1">女</el-radio>
</div>
<div>
    <el-radio-group v-model="radio2">
        <el-radio value="1">选项1</el-radio>
        <el-radio value="2">选项2</el-radio>
        <el-radio value="3">选项3</el-radio>
        <el-radio value="4">选项4</el-radio>
    </el-radio-group>
</div>
<div>
    <el-radio-group v-model="city">
        <el-radio-button value="1">北京</el-radio-button>
        <el-radio-button value="2">上海</el-radio-button>
        <el-radio-button value="3">广州</el-radio-button>
        <el-radio-button value="4">深圳</el-radio-button>
    </el-radio-group>
</div>
<div>
    <el-checkbox value="1" v-model="checkBox">A</el-checkbox>
    <el-checkbox value="2" v-model="checkBox">B</el-checkbox>
    <el-checkbox value="3" v-model="checkBox">C</el-checkbox>
    <el-checkbox value="4" v-model="checkBox">D</el-checkbox>
</div>
<div>
    <el-checkbox-group v-model="checkBox2" :min="1" :max="3">
        <el-checkbox value="1">A</el-checkbox>
        <el-checkbox value="2">B</el-checkbox>
        <el-checkbox value="3">C</el-checkbox>
        <el-checkbox value="4">D</el-checkbox>
    </el-checkbox-group>
</div>
</template>

🦋1.1 <script setup> 部分

import { ref } from 'vue';

const radio = ref("0");
const radio2 = ref("1");
const city = ref("1");
const checkBox = ref(["1"]);
const checkBox2 = ref(["1"]);

• 这部分代码使用了 Vue 3 的 Composition API，通过 ref 创建了响应式数据：
  • radio: 存储第一个单选框组（性别选择）的值，初始值为 "0"（表示男）。
  • radio2: 存储第二个单选框组（选项选择）的值，初始值为 "1"。
  • city: 存储第三个单选按钮组（城市选择）的值，初始值为 "1"（表示北京）。
  • checkBox: 存储第一个复选框组的选中值，初始值为 ["1"]（表示选中 A）。
  • checkBox2: 存储第二个复选框组的选中值，初始值为 ["1"]。

ref 是 Vue 3 中用于创建响应式引用的 API，意味着这些变量的值会随着用户的选择而自动更新。

🦋1.2 <template> 部分

☀️1.2.1 性别选择（el-radio）

<div>
    <el-radio v-model="radio" value="0">男</el-radio>
    <el-radio v-model="radio" value="1">女</el-radio>
</div>

• el-radio 组件是单选框组件，用于让用户从一组选项中选择一个值。
• v-model="radio" 实现双向绑定，radio 的值会根据用户选择的单选框自动更新。
• value="0" 和 value="1" 分别表示男和女，点击对应的单选框时，radio 的值会更新为 "0" 或 "1"。

☀️1.2.2 选项选择（el-radio-group）

<div>
    <el-radio-group v-model="radio2">
        <el-radio value="1">选项1</el-radio>
        <el-radio value="2">选项2</el-radio>
        <el-radio value="3">选项3</el-radio>
        <el-radio value="4">选项4</el-radio>
    </el-radio-group>
</div>

• el-radio-group 用于将多个 el-radio 组件包装成一个组，确保同一组内只能选择一个选项。
• v-model="radio2" 实现了与 radio2 变量的双向绑定。当用户选择其中一个选项时，radio2 的值会更新为所选的 value，例如 "1"、"2"、"3" 或 "4"。

☀️1.2.3 城市选择（el-radio-button）

<div>
    <el-radio-group v-model="city">
        <el-radio-button value="1">北京</el-radio-button>
        <el-radio-button value="2">上海</el-radio-button>
        <el-radio-button value="3">广州</el-radio-button>
        <el-radio-button value="4">深圳</el-radio-button>
    </el-radio-group>
</div>

• el-radio-button 是 el-radio 的变种，通常用于按钮样式的单选框。
• v-model="city" 同样实现了双向绑定，当用户选择某个城市时，city 的值会更新为该城市的 value。
  • 比如选择“北京”时，city 的值会更新为 "1"。

☀️1.2.4 复选框选择（el-checkbox）

<div>
    <el-checkbox value="1" v-model="checkBox">A</el-checkbox>
    <el-checkbox value="2" v-model="checkBox">B</el-checkbox>
    <el-checkbox value="3" v-model="checkBox">C</el-checkbox>
    <el-checkbox value="4" v-model="checkBox">D</el-checkbox>
</div>

• el-checkbox 组件用于复选框。每个复选框有一个 value 属性来指定选中的值。
• v-model="checkBox" 实现与 checkBox 变量的双向绑定。
  • 复选框是多选的，用户可以选择一个或多个选项。当用户选择或取消选择复选框时，checkBox 数组会自动更新，包含所有被选中的复选框的 value。

☀️1.2.5 复选框组（el-checkbox-group）

<div>
    <el-checkbox-group v-model="checkBox2" :min="1" :max="3">
        <el-checkbox value="1">A</el-checkbox>
        <el-checkbox value="2">B</el-checkbox>
        <el-checkbox value="3">C</el-checkbox>
        <el-checkbox value="4">D</el-checkbox>
    </el-checkbox-group>
</div>

• el-checkbox-group 用于将多个复选框组件组合在一起，使它们作为一个组来管理。
• v-model="checkBox2" 实现了与 checkBox2 变量的双向绑定。
• :min="1" 和 :max="3" 属性限制了用户选择复选框的数量范围：
  • min="1"：用户必须至少选择一个选项。
  • max="3"：用户最多可以选择三个选项。

🔎2.标准输入框组件

<script setup>
import {ref} from  'vue'
const value = ref("")
const value2 = ref("")
const value3 = ref("")
const num = ref(1)
// 定义方法，模拟获取输入框的自动提示补全数据
function queryData(queryString, callback) { 
    // queryString参数为当前输入框输入的数据，调用callback回调来将补全数据返回
    let array = []
    if (queryString.length > 0) {
        // 将当前输入的内容作为自动提示的第一个选项
        array.push({value:queryString})         
    }
    // 追加一些测试数据
    array.push(...[{value:"衣服"},{value:"裤子"},{value:"帽子"},{value:"鞋子"}])
    callback(array) 
}
// 选中某个选项后，进行alert提示
function selected(obj) {
    alert(obj.value)
}
</script>

<template>
<el-input v-model="value" 
placeholder="请输入内容"
:disabled="false"
:show-password="true"
:clearable="true"
prefix-icon="Search"
type="text"></el-input>

<el-input v-model="value2" type="text">
  <template #prepend>Http://</template>
  <template #append>.com</template>
</el-input>

<el-autocomplete v-model="value3" 
	:fetch-suggestions="queryData"
	placeholder="请输入内容"
	@select="selected"
	:highlight-first-item="true"
></el-autocomplete>

<el-input-number :min="1" :max="10" :step="1" v-model="num"></el-input-number>
</template>

🦋2.1 <script setup> 部分

import { ref } from 'vue';

const value = ref("");
const value2 = ref("");
const value3 = ref("");
const num = ref(1);

// 定义方法，模拟获取输入框的自动提示补全数据
function queryData(queryString, callback) {
    // queryString参数为当前输入框输入的数据，调用callback回调来将补全数据返回
    let array = [];
    if (queryString.length > 0) {
        // 将当前输入的内容作为自动提示的第一个选项
        array.push({ value: queryString });
    }
    // 追加一些测试数据
    array.push(...[{ value: "衣服" }, { value: "裤子" }, { value: "帽子" }, { value: "鞋子" }]);
    callback(array);
}

// 选中某个选项后，进行alert提示
function selected(obj) {
    alert(obj.value);
}

• ref：使用 Vue 3 的 Composition API 来创建响应式变量，value、value2、value3 和 num 都是响应式的，它们会自动绑定到模板中的组件，随着用户的输入而更新。

  • value 用于绑定第一个 el-input 组件。
  • value2 用于绑定第二个 el-input 组件。
  • value3 用于绑定 el-autocomplete 组件。
  • num 用于绑定 el-input-number 组件，表示一个数字值。

• queryData：这是一个方法，用于模拟自动补全数据。

  • 它接收用户输入的内容 queryString 和一个回调函数 callback。
  • 如果用户输入了内容，则自动补全的数据会包括用户输入的内容作为第一个选项（例如，输入 “衣服” 会在自动提示中出现 “衣服”）。
  • 接着会添加一些固定的测试数据（“衣服”、“裤子”、“帽子”、“鞋子”）。
  • 最后，通过 callback(array) 返回这些数据，供 el-autocomplete 组件使用。

• selected：这个方法会在用户选中某个自动补全建议时触发，展示一个 alert 弹窗，显示选中的项的值。

🦋2.2 <template> 部分

<template>
    <el-input v-model="value" placeholder="请输入内容" :disabled="false" :show-password="true" :clearable="true" prefix-icon="Search" type="text"></el-input>

    <el-input v-model="value2" type="text">
        <template #prepend>Http://</template>
        <template #append>.com</template>
    </el-input>

    <el-autocomplete v-model="value3" :fetch-suggestions="queryData" placeholder="请输入内容" @select="selected" :highlight-first-item="true"></el-autocomplete>

    <el-input-number :min="1" :max="10" :step="1" v-model="num"></el-input-number>
</template>

☀️2.2.1 第一个输入框 (el-input)

<el-input v-model="value" placeholder="请输入内容" :disabled="false" :show-password="true" :clearable="true" prefix-icon="Search" type="text"></el-input>

• v-model="value"：与 value 变量进行双向绑定。当用户输入内容时，value 会自动更新。
• placeholder="请输入内容"：设置输入框的占位提示文本。
• :disabled="false"：设置输入框不可禁用（始终可用）。
• :show-password="true"：允许显示和隐藏输入框的密码内容（通常用于密码输入框）。
• :clearable="true"：允许用户点击输入框内的清除按钮来清空输入的内容。
• prefix-icon="Search"：在输入框左侧显示一个“搜索”图标。
• type="text"：设置输入框类型为文本输入框。

☀️2.2.2 第二个输入框 (el-input 结合 prepend 和 append)

<el-input v-model="value2" type="text">
    <template #prepend>Http://</template>
    <template #append>.com</template>
</el-input>

• v-model="value2"：与 value2 变量进行双向绑定。
• type="text"：设置输入框类型为文本输入框。
• #prepend：使用插槽，在输入框前面显示 Http://。
• #append：使用插槽，在输入框后面显示 .com。这样，用户只能输入域名中间的部分，前后固定的文本部分是不可编辑的。

☀️2.2.3 自动补全输入框 (el-autocomplete)

<el-autocomplete v-model="value3" :fetch-suggestions="queryData" placeholder="请输入内容" @select="selected" :highlight-first-item="true"></el-autocomplete>

• v-model="value3"：与 value3 变量进行双向绑定。
• :fetch-suggestions="queryData"：通过 queryData 方法获取自动补全的数据。每次用户输入内容时，都会调用 queryData，并将输入的内容作为参数传递给它。queryData 方法会返回一个包含建议项的数组，自动补全组件会展示这些建议。
• placeholder="请输入内容"：设置输入框的占位提示文本。
• @select="selected"：当用户选择某个补全项时，触发 selected 方法，这里会弹出 alert 提示所选项的内容。
• :highlight-first-item="true"：高亮显示第一个自动补全项。

☀️2.2.4 数字输入框 (el-input-number)

<el-input-number :min="1" :max="10" :step="1" v-model="num"></el-input-number>

• v-model="num"：与 num 变量进行双向绑定。当用户调整数字时，num 的值会实时更新。
• :min="1"：设置数字的最小值为 1。
• :max="10"：设置数字的最大值为 10。
• :step="1"：设置数字的步长为 1。也就是说，每次点击加减按钮，数字会按步长增加或减少。

🔎3.选择列表

<script setup>
import {ref} from  'vue'
const value = ref([])
const value2 = ref([])
const value3 = ref([])
const options = ref([{
    value: '选项1',
    label: '足球'
}, {
    value: '选项2',
    label: '篮球',
    disabled: true
}, {
    value: '选项3',
    label: '排球'
}, {
    value: '选项4',
    label: '乒乓球'
}, {
    value: '选项5',
    label: '排球'
}])

const options2 = [{
  label:"球类",
  options:[{
    value: '选项1',
    label: '足球'
  }, {
    value: '选项2',
    label: '篮球',
    disabled: true
  }, {
    value: '选项3',
    label: '排球'
  }, {
    value: '选项4',
    label: '乒乓球'
  }]
},{
  label:"休闲",
  options:[{
    value: '选项5',
    label: '散步'
  }, {
    value: '选项6',
    label: '游泳',
  }]
}]

const datas =  ref([
  {
    value: "父1",
    label: "运动",
    children: [
      {
        value: "子1",
        label: "足球",
      },
      {
        value: "子2",
        label: "篮球",
      },
    ],
  },
  {
    value: "父2",
    label: "休闲",
    children: [
      {
        value: "子1",
        label: "游戏",
      },
      {
        value: "子2",
        label: "魔方",
      },
    ],
  },
])
</script>

<template>
<el-select :multiple="true" :clearable="true" v-model="value">
  <el-option v-for="item in options" 
  :value="item.value" 
  :label="item.label"
  :disabled="item.disabled"
  :key="item.value">	
  </el-option>
</el-select>

<el-select :multiple="true" :clearable="true" v-model="value2">
  <el-option-group v-for="group in options2"
  :key="group.label"
  :label="group.label">
    <el-option v-for="item in group.options" 
    :value="item.value" 
    :label="item.label"
    :key="item.value">
    </el-option>
  </el-option-group>
</el-select>

<el-cascader
  v-model="value3"
  :options="datas"
  :props="{ expandTrigger: 'hover' }"
></el-cascader>

</template>

🦋3.1 <script setup> 部分

import { ref } from 'vue';

const value = ref([]); // 用于绑定第一个 el-select 的选中值，默认值是一个空数组。
const value2 = ref([]); // 用于绑定第二个 el-select 的选中值，默认值是一个空数组。
const value3 = ref([]); // 用于绑定 el-cascader 的选中值，默认值是一个空数组。

// 定义第一个 el-select 的选项
const options = ref([
  { value: '选项1', label: '足球' },
  { value: '选项2', label: '篮球', disabled: true }, // 禁用的选项
  { value: '选项3', label: '排球' },
  { value: '选项4', label: '乒乓球' },
  { value: '选项5', label: '排球' }
]);

// 定义第二个 el-select 的选项，按组进行分组
const options2 = [
  {
    label: "球类",
    options: [
      { value: '选项1', label: '足球' },
      { value: '选项2', label: '篮球', disabled: true }, // 禁用的选项
      { value: '选项3', label: '排球' },
      { value: '选项4', label: '乒乓球' }
    ]
  },
  {
    label: "休闲",
    options: [
      { value: '选项5', label: '散步' },
      { value: '选项6', label: '游泳' }
    ]
  }
];

// 定义第三个组件 el-cascader 的选项，具有层级结构
const datas = ref([
  {
    value: "父1",
    label: "运动",
    children: [
      { value: "子1", label: "足球" },
      { value: "子2", label: "篮球" }
    ]
  },
  {
    value: "父2",
    label: "休闲",
    children: [
      { value: "子1", label: "游戏" },
      { value: "子2", label: "魔方" }
    ]
  }
]);

• ref([])：使用 Vue 3 的 Composition API 创建响应式的数据变量 value、value2 和 value3，它们分别用于存储三个组件的选中值。
• options 和 options2：定义了 el-select 组件的选项数据。options 是一个简单的数组，而 options2 则通过 el-option-group 来分组显示选项。
• datas：定义了 el-cascader 组件的级联选择数据，具有父子层级结构。每个父节点可以有多个子节点。

🦋3.2 <template> 部分

<template>
  <!-- 第一个 el-select 组件，支持多选 -->
  <el-select :multiple="true" :clearable="true" v-model="value">
    <el-option 
      v-for="item in options" 
      :value="item.value" 
      :label="item.label" 
      :disabled="item.disabled" 
      :key="item.value">
    </el-option>
  </el-select>

  <!-- 第二个 el-select 组件，支持多选，且选项按组进行分组 -->
  <el-select :multiple="true" :clearable="true" v-model="value2">
    <el-option-group v-for="group in options2" :key="group.label" :label="group.label">
      <el-option 
        v-for="item in group.options" 
        :value="item.value" 
        :label="item.label" 
        :key="item.value">
      </el-option>
    </el-option-group>
  </el-select>

  <!-- el-cascader 组件，用于级联选择 -->
  <el-cascader 
    v-model="value3" 
    :options="datas" 
    :props="{ expandTrigger: 'hover' }">
  </el-cascader>
</template>

☀️3.2.1 第一个 el-select 组件（多选）

<el-select :multiple="true" :clearable="true" v-model="value">
  <el-option 
    v-for="item in options" 
    :value="item.value" 
    :label="item.label" 
    :disabled="item.disabled" 
    :key="item.value">
  </el-option>
</el-select>

• :multiple="true"：启用多选模式。
• :clearable="true"：允许清空选中的选项。
• v-model="value"：与 value 变量进行双向绑定，存储用户选中的选项。
• v-for="item in options"：通过 v-for 循环渲染 options 数组中的每个 el-option 组件。
• :value="item.value" 和 :label="item.label"：每个选项的 value 和 label 值分别对应选项的值和显示文本。
• :disabled="item.disabled"：控制选项是否禁用。

☀️3.2.2 第二个 el-select 组件（按组分组选项）

<el-select :multiple="true" :clearable="true" v-model="value2">
  <el-option-group v-for="group in options2" :key="group.label" :label="group.label">
    <el-option 
      v-for="item in group.options" 
      :value="item.value" 
      :label="item.label" 
      :key="item.value">
    </el-option>
  </el-option-group>
</el-select>

• el-option-group：用于将选项按组分组，每组有一个 label（组名）。
• v-for="group in options2"：循环遍历 options2 中的每个分组选项。
• <el-option>：每个分组内包含的具体选项。选项的值和标签通过 item.value 和 item.label 设置。
• :label="group.label"：显示组的名称。
• :value="item.value" 和 :label="item.label"：选项的值和标签。

☀️3.2.3 el-cascader 组件（级联选择）

<el-cascader 
  v-model="value3" 
  :options="datas" 
  :props="{ expandTrigger: 'hover' }">
</el-cascader>

• :options="datas"：通过 datas 属性传递给 el-cascader 组件，datas 是一个具有父子层级结构的数据。
• v-model="value3"：与 value3 变量进行双向绑定，存储级联选择的值。
• :props="{ expandTrigger: 'hover' }"：通过 props 属性配置级联菜单的展开方式。expandTrigger: 'hover' 表示当鼠标悬停时展开子选项。