ElementPlus 表单组件

ElementPlus 表单组件

简介

Element Plus 使用 el-form 组件声明表单，表单中由若干 el-form-item 组件构成，每个 item 用来定义一个输入表单项，使用表单，可以收集、验证和提交数据。

最基础的表单包括各种输入表单项，比如input、select、radio、checkbox等。

表单组件

典型表单

在使用表单时，可通过 model 属性绑定表单的对象，在输入表单项中使用 v-model 实现对表单对象成员的双向绑定。

表单默认展示时与父元素宽度相同，可通过添加样式的方式设置宽度。

<template>
    <el-form  :model="data" style="width: 200px;">
        <el-form-item label="用户名">
            <el-input v-model="data.user" placeholder="用户名" clearable />
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="data.passwd" placeholder="密码" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">Submit</el-button>
            <el-button>Cancel</el-button>
        </el-form-item>
    </el-form>

</template>

<script setup>
import { ref } from "vue";
const data = ref({ user: "", passwd: "" })

const onSubmit = () => {
    console.log(data.value)
}
</script>

行内表单

当垂直方向空间受限且表单较简单时，可以在一行内放置表单。

通过设置 inline 属性为 true 可以让表单域变为行内的表单域。

<template>
    <el-form  :inline="true" :model="data">
        <el-form-item label="用户名">
            <el-input v-model="data.user" placeholder="用户名" clearable />
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="data.passwd" placeholder="密码" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">Submit</el-button>
            <el-button>Cancel</el-button>
        </el-form-item>
    </el-form>

</template>

<script setup>
import { ref } from "vue";
const data = ref({ user: "", passwd: "" })

const onSubmit = () => {
    console.log(data.value)
}
</script>

对齐方式

在 el-form-item 组件中，可以使用 label 属性为表输入表单项添加描述提示信息。

使用 label-width 设置描述提示信息显示宽度。

使用 label-position 设置提示信息显示对齐方式

<template>
    <el-form  :model="data" label-width="150px" label-position=top>
        <el-form-item label="用户名">
            <el-input v-model="data.user" placeholder="用户名" clearable />
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="data.passwd" placeholder="密码" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">Submit</el-button>
            <el-button>Cancel</el-button>
        </el-form-item>
    </el-form>

</template>

<script setup>
import { ref } from "vue";
const data = ref({ user: "", passwd: "" })

const onSubmit = () => {
    console.log(data.value)
}
</script>

API

组件属性及事件可查看官方文档。

输入框组件

el-input 输入框即用户可通过鼠标或者键盘输入字符，是一个受控的组件，总会显示 Vue 的绑定值。

常用形式

通过添加不同的组件属性，可以实现不同样式的输入框形态。

<template>
    <!-- 基础用法 -->
    <el-input v-model="inputNormal" placeholder="请输入内容"> </el-input>
    <el-divider />

    <!-- 禁用状态 -->
    <el-input v-model="inputUn" disabled placeholder="输入框禁用状态"></el-input>
    <el-divider />

    <el-input v-model="inputClear" placeholder="请输入内容，输入框可一键清空" clearable></el-input>
    <el-divider />

    <!-- 密码框 -->
    <el-input v-model="inputPwd" type="password" placeholder="请输入密码" show-password />
    <el-divider />

    <!-- 带图标的输入框 -->
    <el-input v-model="inputIconDate" placeholder="请选择日期" :suffix-icon="Calendar" />

    <el-input v-model="inputIconSearch" placeholder="请输入搜索的内容" :prefix-icon="Search" />
    <el-divider />

    <!-- 文本域 -->
    <el-input v-model="inputTextarea" :rows="2" type="textarea" placeholder="Please input" />
    <el-input v-model="inputTextarea2" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="Please input" />
    <el-divider />

    <!-- 复合型输入框 -->
    <el-input v-model="inputStart1" placeholder="Please input">
        <template #prepend>http://</template>
    </el-input>

    <el-input v-model="inputStart2" placeholder="Please input">
      <template #append>.com</template>
    </el-input>

    <el-input v-model="inputStart3" placeholder="Please input">
        <template #prepend>http://</template>
        <template #append>.com</template>
    </el-input>

  </template>

  <script setup>
    import {ref} from 'vue'
    import { Calendar, Search } from '@element-plus/icons-vue';
    const inputNormal = ref('asdfasdf')
    const inputUn = ref('')
    const inputClear=ref('')
    const inputPwd=ref('')
    const inputIconDate=ref('')
    const inputIconSearch=ref('')
    const inputTextarea = ref('')
    const inputTextarea2=ref('')
    const inputStart1=ref('')
    const inputStart2=ref('')
    const inputStart3=ref('')
  </script>

API

组件属性及事件可查看官方文档。

CheckBox 多选框

多选框（CheckBox）是一个常用的表单组件，用于在一组选项中进行多选，单独使用可以表示两种状态之间的切换，比如开关按钮。

多选框特别适用于将勾选框绑定到一个数组的情况，这样可以方便地管理多个选项的选中状态。

多选框也可和全选功能结合使用，例如在表格中，通过全选框来同时选择所有的行。

同时也可以设定最小和最大的选项数量来限制用户可以选择的数量。

常用形式

使用 el-checkbox 组件展示多选框。

使用 el-checkbox-group 组件展示多选框组。

<template>
    <!-- 基础用法 -->
    <div>
        <el-checkbox v-model="checkedNomarl1" label="Option Large" size="large" />
        <el-checkbox v-model="checkedNomarl2" label="Option Normar" />
        <el-checkbox v-model="checkedNomarl3" label="Option Small" size="small" />
    </div>

    <!-- 禁用状态 使用 disabled 属性 -->
    <el-checkbox v-model="checkedDisable" disabled>Disabled</el-checkbox>

    <!-- 多选框组，适用于多个勾选框绑定到同一个数组的 通过是否勾选来表示这一组选项中选中的项 -->
    <el-checkbox-group v-model="checkList">
        <el-checkbox label="Option A" />
        <el-checkbox label="Option B" />
        <el-checkbox label="disabled" disabled />
        <el-checkbox label="selected and disabled" disabled />
    </el-checkbox-group>

    <!-- 中间状态 使用 indeterminate 属性表示 checkbox 的不确定状态，一般用于实现全选效果 -->
    <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">Check all</el-checkbox>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :key="city" :label="city"></el-checkbox>
    </el-checkbox-group>

    <!-- 可选项目数量的限制 使用 min 和 max 属性  -->
    <el-checkbox-group v-model="mySelect" :min="1" :max="3">
        <el-checkbox v-for="item in options" :key="item" :label="item"></el-checkbox>
    </el-checkbox-group>
</template>
<script setup>
import { ref } from 'vue'
// 已选中
const checkedNomarl1 = ref(true)
// 未选中
const checkedNomarl2 = ref(false)
const checkedNomarl3 = ref(false)
// 禁用状态
const checkedDisable = ref(false)
// 多选框组，选中的项
const checkList = ref(['selected and disabled', 'Option A'])
// 中间状态 实现全选
const checkAll = ref(false)
const isIndeterminate = ref(true)
const cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']
const checkedCities = ref(['Shanghai', 'Beijing'])
// 数量限制
const options = ["年轻10岁","瘦20斤","中500万","上清华","长高10厘米"]
const mySelect = ref([])

// 全选框响应方法，参数为checkall的状态值,也就是全选框的状态值
const handleCheckAllChange = (val) => {
    // 如果参数为真，将所有选中，否则清空
    checkedCities.value = val ? cities : []
    // 所有数据选中后，改变isIndeterminate的状态值
    isIndeterminate.value = false

}
// 参数为checkedCities当前值
const handleCheckedCitiesChange = (value) => {
    // 获取当前选中选项个数
    const checkedCount = value.length
    // 将选中个数和选项个数比较的结果值赋给 checkall 按钮的状态值
    checkAll.value = checkedCount === cities.length
    // 如果选中个数大于0小于所有选项，则 isIndeterminate 为不确定状态，小于0为空状态，等于length 为全选状态
    isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
</script>

API

组件属性及事件可查看官方文档。

Radio 单选框

单选框（Radio）也是一种在表单中常见的元素，一般用于在一组备选项中进行单选。

单选框不应该有太多的可选项， 如果有很多的可选项应该使用选择框而不是单选框。

常用形式

使用 el-radio 组件展示单选框。

使用 el-radio-button 组件展示按钮样式单选框。

使用 el-radio-group 组件展示单选框组。

要使用 Radio 组件，只需要设置 v-model 绑定变量， 选中意味着变量的值为相应 Radio label 属性的值， label 可以是 String、Number 或 Boolean。

<template>
    <!-- 基础使用  -->
    <el-radio v-model="radioNoraml" label="1"></el-radio>
    <el-radio v-model="radioNoraml" label="2"></el-radio>
    <br>

    <!-- 禁用状态 使用 disabled 属性-->
    <el-radio v-model="radioDisable" disabled label="disabled">Option A</el-radio>
    <el-radio v-model="radioDisable" disabled label="selected and disabled">Option B</el-radio>
    <br>

    <!-- 单选框组 -->
    <el-radio-group v-model="radioNoramlLarge">
        <el-radio label="1" size="large">Option 1</el-radio>
        <el-radio label="2" size="large">Option 2</el-radio>
    </el-radio-group>
    <br>

    <!-- 按钮样式组 -->
    <el-radio-group v-model="radios" @change="handleRadio">
        <el-radio-button :label="3">Option A</el-radio-button>
        <el-radio-button :label="6">Option B</el-radio-button>
        <el-radio-button :label="9">Option C</el-radio-button>
    </el-radio-group>
</template>
<script setup>
    import { ref } from 'vue'
    const radioNoraml = ref('1')
    const radioNoramlLarge = ref('1')
    const radioDisable = ref('selected and disabled')
    const radios = ref(3)
    const handleRadio = (val)=>{
        console.log(val)
    }
</script>

API

组件属性及事件可查看官方文档。

总结

• el-form 实现表单组件
• el-checkbox 、el-checkbox-group 实现多选框
• el-radio 、el-radio-group 实现单选框