Vue3——UI组件库Element Plus（一）

UI组件库Element Plus

- [1、Element Plus入门](#1、Element Plus入门)
- - [1.1、Element Plus的安装与使用](#1.1、Element Plus的安装与使用)
  - - 1.1.1、CDN引入
    - 1.1.2、npm安装
  - 1.2、按钮组件
  - 1.3、标签组件
  - 1.4、空态图与加载占位图组件
  - - 1.4.1、空态图el-empty
    - 1.4.2、骨架屏el-skeleton
  - 1.5、图片与头像组件
  - - 1.5.1、图片组件el-image
    - 1.5.2、头像组件el-avatar
- 2、表单类组件

Element Plus是Vue生态系统中非常流行的UI组件库，它为用户带来了统一的使用体验和明确的控制反馈。对于开发者来说，Element Plus提供了丰富的样式和布局框架，极大地降低了页面开发的成本和复杂性。

Element Plus官网

1、Element Plus入门

Element Plus支持通过CDN直接引入，以便单独使用其提供的组件和样式。这种灵活的使用方式与Vue框架的渐进式风格非常相似。此外，还可以使用npm在Vite创建的模板工程中依赖Element Plus框架进行使用。

1.1、Element Plus的安装与使用

1.1.1、CDN引入

Element Plus支持使用CDN的方式进行引入，这使得在开发简单的静态页面时，我们可以方便地使用CDN方式引入Vue框架；同样，也可以使用相同的方式引入ElementPlus框架。

html 复制代码

<div id="app" style="text-align: center;">
    <h1>这里是模板的内容:{{count}}次单击</h1>
    <button v-on:click="clickButton">按钮</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript">
    const {createApp, ref} = Vue
    const App = createApp({
        setup() {
            const count = ref(0)
            const clickButton = ()=>{
                count.value = count.value + 1
            }
            return {
                count, 
                clickButton
            }
        }
    })
    App.mount('#app');
</script>

运行上述代码后，页面上显示的标题和按钮都是原生的HTML元素，样式并不吸引人。接下来，我们将尝试为其添加Element Plus的样式，以提升页面美观度。

首先，在head标签中引入Element Plus框架，代码如下：

html 复制代码

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-plus"></script>

需要注意，这些CDN引入需要放在Vue的CDN引入后面。之后，在JavaScript代码中对创建的应用实例进行一些修改，使其挂载Element Plus相关的功能，代码如下：

js 复制代码

     // 创建Vue应用实例
     let instance = createApp(App)
     // 挂载使用Element Plus模块
     instance.use(ElementPlus)
     // 挂载应用实例
     instance.mount("#Application")

调用Vue的createApp方法后，返回创建的应用实例，调用此实例的use方法来加载ElementPlus模块，之后就可以在HTML模板中直接使用Element Plus中内置的组件，修改HTML代码如下：

html 复制代码

<div id="app" style="text-align: center;">
    <div style="margin: 40px;">
        <el-tag>这里是模板的内容:{{count}}次单击</el-tag>
    </div>
    <div>
        <el-button @click="clickButton">按钮</el-button>
    </div>
</div>

el-tag与el-button是Element Plus中提供的标签组件与按钮组件。运行代码，页面效果如图所示。可以看到，组件美观了很多。

1.1.2、npm安装

上面演示了在独立的HTML文件中使用Element Plus框架。在完整的Vue工程中，使用Element Plus框架也非常方便。例如，使用Vite新建一个Vue工程，直接在创建好的Vue工程目录下执行如下命令即可：

shell 复制代码

npm install element-plus --save

之后，修改工程的main.js文件来引入Element Plus模块，代码如下：

js 复制代码

import { createApp } from 'vue'
import App from './App.vue'

// 引入Element Plus模块
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 挂载ElementPlus模块
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

下面我们尝试修改工程中的HelloWorld.vue，在其中使用Element Plus内置的组件。修改HelloWorld.vue文件中的template模板如下：

html 复制代码

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-empty description="空空如也~"></el-empty>
  </div>
</template>

其中，el-empty组件是一个空态页组件，用来展示无数据时的页面占位图。运行项目，效果如图所示。

1.2、按钮组件

Element Plus中提供了el-button组件来创建按钮，el-button组件中提供了很多属性来对按钮的样式进行定制。常用的属性列举如表所示。

属性	意义	值
`size`	设置按钮尺寸	default：中等尺寸 small：小尺寸 large：大尺寸
`type`	按钮类型，设置不同的类型会默认配置配套的按钮风格	primary：常规 success：成功 warning：警告 danger：危险 info：详情 text：文本风格
`plain`	是否采用描边风格的按钮	布尔值
`round`	是否为圆角按钮	布尔值
`circle`	石佛为圆形按钮	布尔值
`loading`	是否为加载中按钮（附带一个loading指示器）	布尔值
`disabled`	是否为禁用状态	布尔值
`autofocus`	是否自动聚焦	布尔值
`icon`	设置图标名称	图标名字符串

size属性枚举了3种按钮的尺寸，加上默认的尺寸，一共有4种可用。我们可以根据不同的场景为按钮选择合适的尺寸，各种尺寸按钮的代码示例如下：

html 复制代码

<el-button>默认按钮</el-button>
<el-button size="large">大等按钮</el-button>
<el-button size="small">小型按钮</el-button>

type属性主要用于控制按钮的风格。el-button组件默认提供了一组风格可供开发者选择，不同的风格适用于不同的业务场景，例如danger风格通常用来提示用户这个按钮的单击是一个相对危险的操作。示例代码如下：

html 复制代码

<el-button type="primary">常规按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>

plain属性用于控制按钮是填充风格的还是描边风格的，round属性用于控制按钮是否为圆角的，circle属性用于设置是否为圆形按钮，loading属性用于设置当前按钮是否为加载态的，disable属性用于设置按钮是否为禁用的，示例代码如下：

html 复制代码

<el-button type="primary" :plain="true">描边</el-button>
<el-button type="primary" :round="true">圆角</el-button>
<el-button type="primary" :circle="true">圆形</el-button>
<el-button type="primary" :disable="true">禁用</el-button>
<el-button type="primary" :loading="true">加载</el-button>

Element Plus框架提供了很多内置图标可以直接使用。要使用这些图标，我们需要依赖element-plus-icons模块，运行如下指令安装：

shell 复制代码

npm install @element-plus/icons-vue --save

在使用这些图标前，我们需要进行全局注册，在main.js文件中添加如下代码：

js 复制代码

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入Element Plus模块
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//引入图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App);
app.use(ElementPlus);
//遍历ElementPlusIconsVue中的所有组件进行注册
for(const [key, component] of Object.entries(ElementPlusIconsVue)) {
    //向应用实例中全局注册图标组件
    app.component(key, component)
}
app.mount('#app');

之后，在使用el-button按钮组件时，可以通过设置其icon属性来使用图标按钮，示例如下：

html 复制代码

<div style="margin-top: 20px;">
 <el-button type="primary" icon="Share"></el-button>
 <el-button type="primary" icon="Delete"></el-button>
 <el-button type="primary" icon="Search">图标在前</el-button>
 <el-button type="primary">
   图标在后<el-icon class="el-icon--right"><Upload/></el-icon>
 </el-button>
</div>

1.3、标签组件

从展示样式来看，Element Plus中的标签组件与按钮组件非常相似。Element Plus中使用el-tag组件来创建标签，其中可用的属性列举如表所示。

属性	意义	值
`type`	设置标签类型	success：成功 info：详情 warning：警告 danger：危险
`size`	标签的尺寸	default：中等尺寸 samll：小尺寸 large：大尺寸
`hit`	是否描边	布尔值
`effect`	主题	dark：暗黑 light：明亮 plain：通用
`closable`	标签是否可关闭	布尔值
`disable-transitions`	使用禁用渐变动画	布尔值
`click`	单击标签的触发事件	函数
`close`	单击标签上的关闭按钮的触发事件	函数

el-tag组件的type属性和size属性的用法与el-button组件相同，这里不再赘述；hit属性用来设置标签是否带描边；color属性用来定制标签的背景颜色。示例代码如下：

html 复制代码

<el-tag>普通标签</el-tag>
<el-tag :hit="true">描边标签</el-tag>
<el-tag color="purple">紫色背景标签</el-tag>

closable属性用来控制标签是否为可关闭的。通过设置这个属性，标签组件会自带删除按钮，在许多实际业务场景中，我们都需要灵活地进行标签的添加和删除，示例代码如下：

html 复制代码

<script setup>
  import { ref } from 'vue'
  //默认展示的标签
  const tags = ref(['男装', '女装', '帽子', '鞋子']);
  //控制输入框是否展示
  const show = ref(false);
  //与输入框进行数据绑定
  const inputValue = ref('');
  //删除某个标签的方法，将其数据源数组中移除
  function closeTag(index) {
    tags.value.splice(index, 1);
  }
  //显示输入框，新建标签时将输入框展示出来
  function showInput() {
    show.value = true
  }
  //确认输入，当输入框时区焦点时调用，向数据源列表中新增数据
  function handleInputConfirm() {
    if(inputValue.value) {
      tags.value.push(inputValue.value);
    }
    show.value = false;
    inputValue.value = '';
  }

</script>

<template>
  <div style="margin-top: 20px;">
    <template v-for="(tag, index) in tags" :key="tag">
      <el-tag :closable="true" @close="closeTag(index)">{{ tag }}</el-tag>
      <span style="padding:10px"></span>
    </template>
    <el-input style="width: 90px;"
      v-if="show"
      v-model="inputValue"
      @keyup.enter="handleInputConfirm"
      @blur="handleInputConfirm"
      size="small">
    </el-input>
    <el-button size="small" v-else @click="showInput">新建标签</el-button>
  </div>
</template>

运行上述代码，效果如图所示。

当单击标签上的"关闭"按钮时，对应的标签会被删除，当单击"新建标签"按钮时，当前位置会展示出一个输入框，el-input是Element Plus中提供的输入框组件。

关于标签组件，Element Plus中还提供了一种类似于复选框的标签组件el-check-tag，这个组件的使用非常简单，可通过设置其checked属性来控制是否选中，示例代码如下：

html 复制代码

<el-check-tag :checked="true">足球</el-check-tag>
<el-check-tag :checked="false">篮球</el-check-tag>

1.4、空态图与加载占位图组件

当页面没有数据或页面正在加载数据时，通常需要一个空态图或占位图来提示用户。针对这两种场景，ElementPlus分别提供了el-empty与el-skeleton组件。

1.4.1、空态图el-empty

el-empty用来定义空态图组件，当页面没有数据时，我们可以使用这个组件来进行占位提示。el-empty组件中的可用属性列举如表所示。

属性	意义	值
`image`	设置空态图所展示的图片，若不设置，则为默认图	字符串
`image-size`	设置图片展示的大小	数值
`description`	设置描述语文本	字符串

用法示例如下：

html 复制代码

<el-empty description="设置空态图的描述文案" :image-size="400">
</el-empty>

el-empty组件还提供了许多插槽，使用这些插槽可以更加灵活地定制出所需要的空态图样式。示例代码如下：

html 复制代码

     <el-empty>
       <!-- image具名插槽用来替换默认的图片部分 -->
       <template v-slot:image>
         <div>这里是自定义图片位置</div>
       </template>
       <!-- description具名插槽用来替换默认的描述部分 -->
       <template v-slot:description>
         <h3>自定义描述内容</h3>
       </template>
       <!-- 默认的插槽用来在空态图的尾部追加内容 -->
       <el-button>看看其他内容</el-button>
     </el-empty>

如以上代码所示，el-empty组件内实际上定义了3个插槽，默认的插槽可以向空态图组件的尾部追加元素，image具名插槽用来完全自定义组件的图片部分，description具名插槽用来完全自定义组件的描述部分。

1.4.2、骨架屏el-skeleton

在Element Plus中，数据加载的过程可以使用骨架屏来占位。使用骨架屏往往比单纯地使用一个加载动画的用户体验要好很多。el-skeleton组件中常用的属性列举如表所示。

属性	意义	值
`animated`	是否使用动画	布尔值
`count`	渲染多少个骨架模板	数值
`loading`	是否展示真实的元素	布尔值
`rows`	骨架屏额外渲染的行数	整数
`throttle`	防抖属性，设置延迟渲染的时间	整数，单位为毫秒

示例代码如下：

html 复制代码

<el-skeleton :rows="10" :animated="true"></el-skeleton>

注意，rows属性设置的行数是骨架屏中额外渲染的行数。在实际的页面展示效果中，渲染的行数比这个参数设置的数值多1。配置animated参数为true时，可以使骨架屏展示成闪动的效果，加载过程更加逼真。

我们也可以完全自定义骨架屏的样式，使用template具名插槽即可。方便的是，Element Plus提供了el-skeleton-item组件，这个组件通过设置不同的样式，可以非常灵活地定制出与实际要渲染的元素相似的骨架屏，示例代码如下：

html 复制代码

     <el-skeleton :animated="true" >
       <template #template>
         <!-- 定义标题骨架 -->
         <el-skeleton-item variant="h1" style="width: 100px; height: 30px; padding:0"/>
         <!-- 定义图片骨架 -->
         <div style="display: flex; justify-content: center;">
          <el-skeleton-item variant="image" style="width: 240px; height: 240px; padding:0" />
         </div>
         <!-- 定义段落骨架 -->
         <el-skeleton-item variant="p" style="width: 30%; padding:0; margin-top:20px"/>
         <el-skeleton-item variant="p" style="width: 90%; padding:0"/>
         <el-skeleton-item variant="p" style="width: 90%; padding:0"/>
       </template>
     </el-skeleton>

el-skeleton组件中默认的插槽用来渲染真正的页面元素，通过组件的loading属性控制是展示加载中的占位元素还是真正的功能元素。例如，我们可以使用一个延时函数来模拟请求数据的过程，示例代码如下：

html 复制代码

<template>
  <div style="margin: 20px;">
     <el-skeleton :rows="1" :animated="true" :loading="loading">
       <h1>这里是真实的页面元素</h1>
       <p>{{msg}}</p>
     </el-skeleton>
  </div>
</template>

JavaScript逻辑代码：

js 复制代码

<script setup>
  import { ref, onMounted } from 'vue'
  const msg = ref("") 
  const loading = ref("")
  function getData() {
    msg.value = "这里是请求到的数据"
    loading.value = false
  }
  onMounted(()=>{
    //模拟请求数据
    setTimeout(()=>{
      getData()
    }, 3000);
  })
</script>

最后需要注意，throttle属性是el-skeleton组件提供的一个防抖属性，如果设置了这个属性，其骨架屏的渲染会被延迟。这在实际开发中非常有用。很多时候，我们的数据请求是非常快的，这样在页面加载时会出现骨架屏一闪而过的抖动现象，有了防抖处理，当数据的加载速度很快时，可以极大地提高用户体验。

1.5、图片与头像组件

1.5.1、图片组件el-image

针对加载图片的元素，Element Plus提供了el-image组件，相比原生的image标签，这个组件封装了一些加载过程的回调以及处理相关占位图的插槽。el-image组件的常用属性列举如表所示。

属性	意义	值
`fit`	设置图片的适应方式	fill：拉伸充满 contain：缩放到完整展示 cover：简单覆盖 none：不进行任何拉伸处理 scale-down：缩放处理
`hide-on-click-modal`	开启预览功能时，是否可以通过单击遮罩来关闭预览	布尔值
`lazy`	是否开启懒加载	布尔值
`preview-src-list`	设置图片预览功能	数组
`src`	图片资源地址	字符串
`load`	图片加载成功后的回调	函数
`error`	图片加载失败后的回调	函数

示例代码如下：

html 复制代码

<el-image style="width:500px" src="http://huishao.cc/img/head-img.png"></el-image>

el-image组件本身的使用比较简单，通常使用el-image组件是为了方便添加图片加载中或加载失败时的占位元素，使用placeholder插槽来设置加载中的占位内容，使用error插槽来设置加载失败的占位内容，示例代码如下：

html 复制代码

  <div style="margin: 20px;">
    <el-image style="width:500px" src="http://huishao.cc/img/head-img.png">
      <template #placeholder>
        <h1>加载中...</h1>
      </template>
      <template #error>
        <h1>加载失败</h1>
      </template>
    </el-image>
  </div>

1.5.2、头像组件el-avatar

el-avatar组件是Element Plus提供的一个更加面向应用的图片组件，它专门用于展示头像类的元素，示例代码如下：

html 复制代码

     <!-- 使用文本类型的头像 -->
     <el-avatar style="margin:20px">用户</el-avatar>
     <!-- 使用图标类型的头像 -->
     <el-avatar style="margin:20px"><el-icon><User/></el-icon></el-avatar>
     <!-- 使用图片类型的头像 -->
     <el-avatar style="margin:20px" :size="100"
src="http://huishao.cc/img/avatar.jpg"></el-avatar>
     <el-avatar style="margin:20px" src="http://huishao.cc/img/avatar.jpg"></el-avatar>
     <el-avatar style="margin:20px" shape="square"
src="http://huishao.cc/img/avatar.jpg"></el-avatar>

el-avatar组件支持使用文本、图标和图片来进行头像的渲染，同时也可以设置shape属性来定义头像的形状，支持圆形和方形。上面示例代码的运行效果如图所示。

同样，对于el-avatar组件，我们也可以使用默认插槽来完全自定义头像内容。在Element Plus框架中，大部分组件都非常灵活，除默认提供的一套样式外，也支持开发者完全对其进行定制。

2、表单类组件

表单类组件一般只可以进行用户交互，可以根据用户的操作而改变页面逻辑的相关组件。Element Plus对常用的交互组件都有封装，例如单选框、多选框、选择列表、开关等。

2.1、单选框与多选框

2.1.1、单选框组件el-radio

在Element Plus中，使用el-radio组件来定义单选框。el-radio组件支持多种样式，使用起来非常简单。el-radio的常规用法示例如下：

html 复制代码

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

同属一组的单选框的v-model需要绑定到相同的组件属性上，上面代码中的radio是定义在当前组件内的属性，当选中某个选项时，属性对应的值为单选框label所设置的值。

当选项比较多时，我们也可以直接使用el-radio-group组件来进行包装，之后只需要对el-radio-group组件进行数据绑定即可，示例代码如下：

html 复制代码

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

除el-radio可以创建单选框外，Element Plus还提供了el-radio-button组件来创建按钮样式的单选组件，示例代码如下：

html 复制代码

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

el-radio组件的常用属性列举如表所示。

属性	意义	值
`disabled`	是否禁用	布尔值
`border`	是否显示描边	布尔值
`change`	选择内容发生变化时的触发事件	函数

el-radio-group组件的常用属性列举如表所示。

属性	意义	值
`disabled`	是否禁用	布尔值
`text-color`	设置按钮样式的选择组件的文本颜色	字符串
`fill`	按钮样式的选择组件的填充颜色	字符串
`change`	选择内容发生变化时的触发事件	函数

2.1.2、多选框组件el-checkbox

多选框组件使用el-checkbox创建，其用法与单选框类似，基础的用法示例如下：

html 复制代码

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

注意，上面的示例代码运行后，Vue在控制台会输出警告信息。更标准的用法与单选框类似，将一组复选框使用el-checkbox-group组件进行包装，并且可以通过设置min和max属性来设置最少／最多可以选择多少选项，示例代码如下：

html 复制代码

<script setup>
  import { ref, watch } from 'vue'
  const checkBox = ref([]);
  watch(checkBox, (newValue, oldValue)=>{
    console.log(newValue + ' ' + oldValue)
  }, {deep: true})
</script>

<template>
  <div style="margin: 20px;">
    <el-checkbox-group v-model="checkBox" :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>

对应地，Element Plus也提供了el-checkbox-button组件用于创建按钮样式的复选框，其用法与单选框类似，我们可以通过编写实际代码来测试与学习其用法，这里不再赘述。

2.2、标准输入框组件

在Element Plus框架中，输入框是一种非常复杂的UI组件，el-input组件提供了非常多的属性供开发者进行定制。输入框一般用来展示用户的输入内容，可以使用v-model来对其进行数据绑定。el-input组件的常用属性列举如表所示。

属性	意义	值
`type`	输入框的类型	text：文本框 textarea：文本区域
`maxlength`	设置最大文本长度	数值
`minlength`	设置最小文本长度	数值
`show-word-limit`	是否显示输入字数统计	布尔值
`placeholder`	输入框默认的提示文本	字符串
`clearable`	是否展示清空按钮	布尔值
`show-password`	是否展示密码保护按钮	布尔值
`disabled`	是否禁用此输入框	布尔值
`size`	设置尺寸	default：中等 small：小 large：大
`prefix-icon`	输入框前缀图标	字符串
`suffix-icon`	输入框尾部图标	字符串
`autosize`	是否自适应内容高度	当设置为布尔值时，是否自动适应当设置为如下格式对象时进行行数限制： { minRows：控制展示的最小行数 maxRows：控制展示的最大行数 }
`autocomplete`	是否自动补全	布尔值
`resize`	设置能否被用户拖拽缩放	none：进行缩放 both：支持在水平和数值方向缩放 horizontal：支持在水平方向缩放 vertical：支持在竖直方向缩放
`autofocus`	是否自动获取焦点	布尔值
`label`	输入框关联的标签文案	字符串
`blur`	输入框失去焦点时触发	函数
`focus`	输入框获取焦点时触发	函数
`change`	输入框失去焦点或用户按Enter键时触发	函数
`input`	在输入的值发生变化时触发	函数
`clear`	在用户单击输入框的情况按钮后触发	函数

输入框的基础使用方法示例如下：

html 复制代码

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

el-input组件内部也封装了许多有用的插槽，使用插槽可以为输入框定制前置内容、后置内容或者图标。插槽名称列举如表所示。

名称	说明
prefix	输入框头部内容，一般为图标
suffix	输入框尾部内容，一般为图标
prepend	输入框前置内容
append	输入框后置内容

前置内容和后置内容在有些场景下非常实用，示例代码如下：

html 复制代码

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

2.3、带推荐列表的输入框组件

当激活某个输入框时，它会自动弹出推荐列表供用户进行选择。在Element Plus框架中提供了el-autocomplete组件来支持这种场景。el-autocomplete组件的常用属性列举如表所示。

属性	意义	值
`placeholder`	输入框的占位文本	字符串
`disabled`	设置石佛禁用	布尔值
`debounce`	获取输入建议的防抖动延迟	数值，单位为毫秒
`placement`	弹出建议菜单的位置	top top-start top-end bottom bottom-start boottom-end
`fetch-suggestions`	当需要从网络请求建议数据时，设置此函数	函数类型为Function(queryString, callback)，当获取建议数据后，使用callback参数进行返回
`trigger-on-focus`	是否在输入框获取焦点时自动显示建议列表	布尔值
`prefix-icon`	头部图标	字符串
`suffix-icon`	尾部图标	字符串
`hide-loading`	是否隐藏加载时的loading图标	布尔值
`highlight-first-item`	是否对建议列表中的第一项进行高亮处理	布尔值
`value-key`	建议列表中用来展示的对象键名	字符串，默认为value
`select`	单击选中建议项时触发	函数
`change`	输入框中的值发生变化时触发	函数

示例代码如下：

html 复制代码

<template>
  <div style="margin: 20px;">
    <el-autocomplete v-model="value"
      :fetch-suggestions="queryData"
      placeholder="请输入内容"
      @select="selected"
      :highlight-first-item="true">
    </el-autocomplete>
  </div>
</template>

对应的JavaScript逻辑代码如下：

js 复制代码

<script setup>
  import { ref } from 'vue'
  const value = ref('')
  //模拟获取自动提示补全数据
  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>

注意，如以上代码所示，在queryData函数中调用callback回调时需要传递一组数据，此数组中的数据都是JavaScript对象，在渲染列表时，默认会取对象的value属性的值作为列表中渲染的值，我们也可以自定义这个要取的键名，配置组件的value-key属性即可。

el-input组件支持的属性和插槽，el-autocomplete组件也都是支持的，可以通过prefix、suffix、prepend和append这些插槽来对el-autocomplete组件中的输入框进行定制。

2.4、数字输入框

数字输入框专门用来输入数值，我们在电商网站进行购物时，经常会遇到此类输入框，例如商品数量的选择、商品尺寸的选择等。Element Plus中使用el-input-number来创建数字输入框，其常用属性列举如表所示。

属性	意义	值
`min`	设置允许输入的最小值	数值
`max`	设置允许输入的最大值	数值
`step`	设置步长	数值
`step-strictyly`	设置是否只能输入步长倍数的值	布尔值
`precision`	数值精度	数值
`size`	计数器尺寸	large default small
`disabled`	是否禁用输入框	布尔值
`controls`	是否使用控制按钮	布尔值
`controls-position`	设置控制按钮的位置	right
`placeholder`	设置输入框的默认提示文案	字符串
`change`	输入框的值发生变化时触发	函数
`blur`	输入框失去焦点时触发	函数
`focus`	输入框获得焦点时触发	函数

一个简单的数字输入框示例如下：

html 复制代码

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

2.5、选择列表

选择列表组件是一种常用的用户交互元素，它可以提供一组选项供用户进行选择，支持单选，也支持多选。Element Plus使用el-select来创建选择列表组件。el-select组件的功能非常丰富，其常用属性列举如表所示。

属性	意义	值
`multiple`	是否支持多选	布尔值
`disabled`	是否禁用	布尔值
`size`	输入框尺寸	large small default
`clearable`	是否可清空选项	布尔值
`collapse-tags`	多选时，是否将选中的值以文字的形式展示	布尔值
`multiple-limit`	设置多选时最多可选择的项目数	数值，若设置为0，则不进行限制
`placeholder`	输入框的占位文案	字符串
`filterable`	是否支持搜索	布尔值
`allow-create`	是否允许用户创建新的条目	布尔值
`filter-method`	搜索方法	函数
`remote`	是否为远程搜搜	布尔值
`remote-method`	远程搜索方法	布尔值
`loading`	是否正在从远程获取数据	布尔值
`loading-text`	数据加载时需要	字符串
`no-match-text`	控制当未搜索到结果时选择框显示的文案	字符串
`no-data-text`	选项为空时显示的文字	字符串
`automatic-dropdown`	对于不支持搜索的选择框，当获取到焦点时是否自动下拉展开	布尔值
`clear-icon`	自定义清空图标	字符串
`change`	选中值发生变化时触发的事件	函数
`visible-change`	下拉框出现/隐藏时触发的事件	函数
`remove-tag`	多选模式下，移除标签时触发的事件	函数
`clear`	用户点击清空按钮后触发的事件	函数
`blur`	选择框失去焦点时触发的事件	函数
`focus`	选择框获取焦点时触发的事件	函数

html 复制代码

<script setup>
  import { ref, watch } from 'vue'
  const options = ref([
    {label: 'aaa', value: 1},
    {label: 'bbb', value: 2},
    {label: 'ccc', value: 3}
  ])
  const value = ref([])
  watch(value, (newValue, oldValue)=>{
    console.log(newValue);
  }, {deep: true})
</script>

<template>
  <div style="margin: 20px;">
     <el-select :multiple="true" :clearable="true" v-model="value">
       <el-option v-for="item in options"
       :value="item.value"
       :label="item.label"
       :key="item.value">
       </el-option>
     </el-select>
  </div>
</template>

如以上代码所示，选择列表组件中选项的定义是通过el-option组件来完成的，此组件的可配置属性有value、label和disabled。其中value通常设置为选项的值，label设置为选项的文案，disabled控制选项是否禁用。

选择列表也支持进行分组，我们可以将同类的选项进行归并，示例代码如下：

html 复制代码

<template>
  <div style="margin: 20px;">
     <el-select :multiple="true" :clearable="true" v-model="value">
      <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>
  </div>
</template>

对应渲染组件的数据结构如下：

js 复制代码

<script setup>
  import { ref, watch } from 'vue'
  const value = ref([])
  const options2 = [
    {
      label: '球类',
      options: [
        {label: '选项1', value: '足球'},
        {label: '选项2', value: '篮球', disabled: true},
        {label: '选项3', value: '排球'},
        {label: '选项4', value: '乒乓球'}
      ]
    },
    {
      label: '休闲',
      options: [
        {value: '选项5', label: '散步'},
        {value: '选项6', label: '游泳'}
      ]
    }
  ] 
</script>

2.6、多级列表组件

el-select组件创建的选择列表都是单列的，在实际应用场景中，我们通常需要使用多级选择列表，Element Plus框架中提供了el-cascader组件来提供支持。

当数据集成有清晰的层级结构时，可以通过使用el-cascader组件来让用户逐级查看和选择选项。el-cascader组件的使用很简单，常用属性列举如表所示。

属性	意义	值
`options`	可选项的数据源	数组
`props`	配置对象	对象
`size`	设置尺寸	large small default
`placeholder`	设置输入框的占位文本	字符串
`disabled`	设置是否禁用	布尔值
`clearable`	设置是否支持清空选项	布尔值
`show-all-levels`	设置输入框是否展示完整的选中路径	布尔值
`collapse-tags`	设置多选模式下是否隐藏标签	布尔值
`separator`	设置选项分隔符	字符串
`filterable`	设置是否支持搜索	布尔值
`filter-method`	自定义搜索函数	函数
`debounce`	防抖间隔	数值，单位为毫秒
`before-filter`	调用搜索函数前的回调	函数
`change`	当选中项发生变化时回调的函数	函数
`expand-change`	当展开的累彪发生发变时回调的函数
`blur`	当输入框失去焦点时回调的函数	函数
`focus`	当输入框获得焦点时回调到的函数
`visible-change`	下拉菜单出现/隐藏时回调的函数	函数
`remove-tag`	在多选模式下，移除标签时回调的函数	函数

在表列出的属性列表中，props属性需要设置为一个配置对象，此配置对象可以对选择列表是否可多选、子菜单的展开方式等进行设置。props对象的可配置键及意义如表所示。

键	意义	值
`expandTrigger`	设置子菜单的展开方式	click：单击展开 hover：鼠标触碰展开
`multiple`	是否支持多选	布尔值
`emitPath`	当选中的选项发生变化时，是否返回此选项的完整路径数组	布尔值
`lazy`	是否对数据懒加载	布尔值
`lazyLoad`	懒加载时的动态数据获取函数	函数
`value`	指定选项的值为数据源对象中的某个属性	字符串，默认值为'value'
`label`	指定标签渲染的文本为数据源对象中的某个属性	字符串，默认值为'label'
`children`	指定选项的子累彪为数据源对象中的某个属性	字符串，默认值为'children'

下面的代码将演示多级列表组件的基本使用方法，我们首先准备一组测试的数据源数据。

js 复制代码

<script setup>
  import { ref, watch } from 'vue'
  const value = ref([])
  const datas = [
    {
      value: '父1',
      label: '运动',
      children: [
        {value: '子1', label: '足球'},
        {value: '子2', label: '篮球'}
      ],
    },
    {
      value: '父2',
      label: '休闲',
      children: [
        {value: '子1', label: '游戏'},
        {value: '子2', label: '魔方'}
      ]
    }
  ]
  watch(value, (newValue, oldValue)=>{
    console.log(newValue)
  }, {deep: true}) 
</script>

编写template结构代码如下：

html 复制代码

<template>
  <div style="margin: 20px;">
     <el-cascader
       v-model="value"
       :options="datas"
       :props="{ expandTrigger: 'hover' }"
     ></el-cascader>
  </div>
</template>