Vue3简单快速基础入门 (五)

Element Plus 快速掌握

1. Element Plus

Element Plus 是一套基于 Vue 3.0 的桌面端组件库，提供了更多的组件和功能，适合中小型产品快速开发。
Element Plus 文档

1.1 安装

项目目录下打开终端执行命令：

npm install element-plus --save

安装完成后，package.json 文件中会新增 element-plus 依赖。这里版本为"element-plus": "^2.9.6"。

注意：每一节，都是使用vite新建了一个项目，如果自己能够分辨清楚内容，可以忽略。

1.2 导入Element Plus

在 main.js 文件中导入 Element Plus：

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


//整体导入element-plus组件库
import ElementPlus from 'element-plus'  //导入element-plus组件库的所有模块和功能
import 'element-plus/dist/index.css'    //导入element-plus组件库所需的全局CSS样式


// 注册ElementPlus
createApp(App).use(ElementPlus).mount('#app')

2.使用组件

在 App.vue 文件中使用组件。但是需要注意的是，组件特性很多，这里只做几个简单演示，快速上手，其他复杂功能，更详细的还是翻阅官方文档。

2.1 Button 按钮

按钮组件提供了六种类型：默认按钮、主要按钮、成功按钮、信息按钮、警告按钮、危险按钮。

<script setup>

</script>

<template>
  <h1>枫月Blog - https://blog.xy21lin.cn</h1>
  <hr>
  <h2>按钮组件</h2>
  <div class="mb-4">
    <el-button>默认按钮</el-button>
    <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>
  </div>

  <hr>
  <h2>按钮属性</h2>
  <div class="mb-4">
    <el-button type="primary" plain>朴素</el-button>
    <el-button type="primary" round>圆角</el-button>
    <el-button type="primary" circle>园</el-button>
    <el-button type="primary" disabled>禁用</el-button>
    <el-button type="primary" loading>加载中</el-button>
  </div>

  <hr>
  <h2>按钮大小</h2>
  <div class="mb-4">
    <el-button type="success" size="large">大按钮</el-button>
    <el-button type="success" >正常</el-button>
    <el-button type="success" size="small">小按钮</el-button>
  </div>

</template>

<style scoped>

</style>

2.2 icon 图标

使用图标之前，需要先导入 Element Plus 的图标库并注册到vue实例中，不然无法使用。

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


//整体导入element-plus组件库
import ElementPlus from 'element-plus'  //导入element-plus组件库的所有模块和功能
import 'element-plus/dist/index.css'    //导入element-plus组件库所需的全局CSS样式

// 导入ElementPlus图标库
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

// 注册ElementPlus图标库
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

// 注册ElementPlus和图标库
app.use(ElementPlus).mount('#app')

接下来演示一下icon组件的使用：

<script setup>


</script>

<template>
  <h1>枫月Blog - https://blog.xy21lin.cn</h1>
  <hr>
  <h2>图标</h2>
  <el-icon><Plus /></el-icon>
  <el-icon><Edit /></el-icon>
  <el-icon><Delete /></el-icon>
  <el-icon class="is-loading"><Loading /></el-icon>
  <hr>
  <h2>图标属性</h2>
  <!--size设置图标大小，默认是px，color设置图标颜色 -->
  <el-icon size="30" color="#f00"><Search /></el-icon>
  <hr>
  <h2>图标结合按钮</h2>
  <el-button type="primary">
    <el-icon><Search /></el-icon>
    <span>搜索</span>
  </el-button>
  <!-- 没有文字的搜索按钮 -->
  <el-button type="primary">
    <el-icon><Search /></el-icon>
  </el-button>
  <!-- 圆形的搜索按钮 -->
  <el-button type="primary" circle>
    <el-icon><Search /></el-icon>
  </el-button>
  <hr>
  <h2>按钮组</h2>
  <el-button-group>
    <el-button type="primary">
      <el-icon><Plus /></el-icon>
    </el-button>
    <el-button type="primary">
      <el-icon><Delete /></el-icon>
    </el-button>
    <el-button type="primary">
      <el-icon><Search /></el-icon>
    </el-button>
  </el-button-group>


</template>

<style scoped>

</style>

2.3 提示框

这里主要演示三种提示框组件：ElMessage，ElMessageBox，ElNotification。

<script setup>
  import { ElMessage,ElMessageBox,ElNotification } from 'element-plus';


  const showMessage = ()=>{
    ElMessage({
      type:'success',   // 类型  success / warning / info / error
      message: '恭喜你，操作成功！',  // 内容
      duration: 2000,  // 持续时间，单位：毫秒
      showClose: true  // 是否显示关闭按钮
    })
  }

  const showMessageBox = ()=>{
    //ElMessageBox.confirm(提示信息，标题，{选项}
    ElMessageBox.confirm('你确定要删除该条信息吗？', '标题', {
      confirmButtonText: '确定',   // 确定按钮文字
      cancelButtonText: '取消',   // 取消按钮文字
      type: 'warning'   // 类型   success / warning / info / error
    }).then(() => {     // 点击确定按钮
      ElMessage({
        type:'success', // 类型  success / warning / info / error
        message: '删除成功' // 内容
      })
    }).catch(() => {      // 点击取消按钮
      ElMessage({
        type: 'info', // 类型  success / warning / info / error
        message: '已取消删除' // 内容
      })
    })
  }

  const showNotification = ()=>{
    ElNotification({
      title: '通知',   // 标题
      message: '欢迎访问枫月博客！',  // 内容
      type: 'success',   // 类型  success / warning / info / error
      duration: 2000,   // 持续时间，单位：毫秒
      showClose: true,   // 是否显示关闭按钮
      position: 'top-right'   // 位置  top-right / top-left / bottom-right / bottom-left
    })
  }

</script>

<template>
  <h1>枫月Blog - https://blog.xy21lin.cn</h1>
  <hr>
  <el-button type="primary" @click="showMessage">ElMessage消息提示框</el-button>
  <hr>
  <el-button type="primary" @click="showMessageBox">ElMessageBox消息弹出框</el-button>
  <hr>
  <el-button type="primary" @click="showNotification">ElNotification通知</el-button>

</template>

<style scoped>

</style>

2.4 导航

<script setup>
import { reactive, ref } from 'vue'

//默认选中的菜单索引
//const selectedIndex = ref("2-2")
const selectedIndex = ref("3")

//选中菜单触发的回调
const selected = (index, indexPath) => {
    console.log("index", index, "indexPath", indexPath)
}

//默认展开的菜单索引
const defaultOpeneds = ref(["1","3"])

//用户执行的命令
const userCommand = (command) => { //点击菜单触发的回调
    console.log("command:", command)
}
</script>

<template>

<h3>水平导航</h3>
<!-- mode="horizontal" 设置为水平导航，去掉则为垂直导航   :default-active="selectedIndex"   默认选中索引 也就是index值-->
<!-- @select="selected" 绑定选中回调函数 -->
<el-menu mode="horizontal" :default-active="selectedIndex" @select="selected">
    <el-menu-item index="1">首页</el-menu-item>
    <!-- el-sub-menu 定义子菜单  -->
    <el-sub-menu index="2">
      <!-- 定义子菜单标题 -->
        <template #title>商城</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="3">订单管理</el-menu-item>
    <el-menu-item index="4">个人信息</el-menu-item>
</el-menu>


<!-- 定义了样式 -->
<h3>水平导航-自定义样式</h3>
<el-menu mode="horizontal" :default-active="selectedIndex" @select="selected" background-color="#545c64"
    text-color="#fff" active-text-color="#ffd04b" style="height: 40px; width: 600px;">
    <el-menu-item index="1">首页</el-menu-item>
    <el-sub-menu index="2">
        <template #title>商城</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="3">订单管理</el-menu-item>
    <el-menu-item index="4">个人信息</el-menu-item>
</el-menu>

<h3>垂直导航</h3><br>
<el-menu :default-active="selectedIndex" @select="selected" style="width: 150px;">
    <el-sub-menu index="1">
        <template #title>
            <el-icon><Search /></el-icon>
            <span>导航一</span>
        </template>
        <el-menu-item-group>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
    </el-sub-menu>
    <el-menu-item index="2">
        <el-icon><Edit /></el-icon>
        <template #title>导航二</template>
    </el-menu-item>
    <el-menu-item index="3">
        <el-icon><Delete /></el-icon>
        <template #title>导航三</template>
    </el-menu-item>
    <el-menu-item index="4">
        <el-icon><Setting /></el-icon>
        <template #title>导航四</template>
    </el-menu-item>
</el-menu>

<h3>垂直导航-默认展开和自定义样式</h3>
<!-- 默认展开所有子菜单   :default-openeds="defaultOpeneds" -->
<el-menu :default-active="selectedIndex" @select="selected" :default-openeds="defaultOpeneds"
    background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" style="width: 150px;">
    <el-sub-menu index="1">
        <template #title>
            <el-icon><Search /></el-icon>
            <span>导航一</span>
        </template>
        <el-menu-item-group>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
    </el-sub-menu>
    <el-menu-item index="2">
        <el-icon><Edit /></el-icon>
        <template #title>导航二</template>
    </el-menu-item>
    <el-sub-menu index="3">
        <template #title>
            <el-icon><Search /></el-icon>
            <span>导航三</span>
        </template>
        <el-menu-item-group>
            <el-menu-item index="3-1">选项1</el-menu-item>
            <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
    </el-sub-menu>
    <el-menu-item index="4">
        <el-icon><Setting /></el-icon>
        <template #title>导航四</template>
    </el-menu-item>
</el-menu>

<h3>面包屑</h3>
<!-- separator="/"   使用 / 作为分隔符 -->
<el-breadcrumb separator="/">
    <el-breadcrumb-item><a href="#">首页</a></el-breadcrumb-item>
    <el-breadcrumb-item><a href="#">订单页</a></el-breadcrumb-item>
    <el-breadcrumb-item><a href="#">个人页</a></el-breadcrumb-item>
</el-breadcrumb>

<h3>下拉菜单</h3><br>
<el-dropdown @command="userCommand">
    <span>
        个人中心<el-icon><User /></el-icon>
    </span>
    <template #dropdown>
        <el-dropdown-menu>
            <el-dropdown-item command="order">订单</el-dropdown-item>
            <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
    </template>
</el-dropdown>

</template>

<style scoped>

</style>

2.5 标签页

<script setup>
import { reactive, ref } from 'vue'

// 默认选中标签页
const activeName = ref('first')

// 标签页回调事件
function handleClick(tab, event) {
  console.log(tab, event)
}



const tab = reactive({
  arr: [
    {
      label: 'User',
      name: 'first',
      content: 'User'
    },
    {
      label: 'Config',
      name: 'second',
      content: 'Config'
    },
    {
      label: 'Role',
      name: 'third',
      content: 'Role'
    },
    {
      label: 'Task',
      name: 'fourth',
      content: 'Task'
    }
  ]
})



const addTabs = () => {
  let index = tab.arr.length
  index++
  tab.arr.push({
    label: '新增标签页' + index,
    name: 'newTab' + index,
    content: '新增标签页' + index
  })

}

const handleRemove = (name) => {
  console.log(name)
  // 过滤掉要删除的标签页
  let newArr = tab.arr.filter(item => item.name !== name)
  tab.arr = newArr
  // 也可以使用先在数组中搜索对应name的索引 然后再使用splice方法删除
}
</script>

<template>

  <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="User" name="first">User</el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
  </el-tabs> -->

  <!-- 动态生成标签页 -->
  <!-- type="" 标签样式  border-card 边框卡片  card 卡片 -->    
   <!-- closable 标签页可关闭  @tab-remove="handleRemove" 标签页移除事件 -->
  <el-tabs v-model="activeName" @tab-click="handleClick" @tab-remove="handleRemove" closable type="border-card">
    <el-tab-pane v-for="value in tab.arr" :key="value.name" :name="value.name" :label="value.label">{{ value.content
      }}</el-tab-pane>
  </el-tabs>

  <el-button type="primary" @click="addTabs()">添加标签页</el-button>
</template>

<style scoped></style>

2.6 输入框

<script setup>
import { ref } from 'vue'

const name = ref('')
const password = ref('')
const content = ref('十一月')
const url = ref('blog.xy21lin.cn')
const url2 = ref('枫月')
const email = ref('571497983')

//const selected = ref('')
const selected = ref('2') //选中的下拉框
</script>

<template>
<div style="width: 300px;">
    <!-- clearable 会在右边显示一个按钮 可一键清空 -->
    <h3>输入框</h3>
    <el-input v-model="name" clearable placeholder="请输入用户名" />

    <!-- show-password 会在右边显示一个小眼睛 可切换显示隐藏密码 -->
    <h3>密码框</h3>
    <el-input v-model="password" show-password placeholder="请输入密码" />

    <h3>文本域</h3>
    <!-- 多行文本域 rows 控制行数 多出部分会出现滚动条-->
    <el-input type="textarea" v-model="content" rows="2" />

    <h3>输入内容长度限制 - 输入框</h3>
    <!-- maxlength 限制输入内容的最大长度 show-word-limit 显示输入内容的字数 -->
    <el-input v-model="name" maxlength="10" show-word-limit />

    <h3>输入内容长度限制 - 文本域</h3>
    <el-input type="textarea" v-model="content" maxlength="20" rows="3" show-word-limit />

    <h3>尺寸</h3>
    大 <el-input size="large" />
    默认 <el-input />
    小 <el-input size="small" />

    <h3>前置</h3>
    <el-input v-model="url">
      <!-- #prepend 标签包裹的内容会显示在输入框的前面 -->
        <template #prepend>https://</template>
    </el-input>

    <h3>后置</h3>
    <el-input v-model="email">
      <!-- #append 标签包裹的内容会显示在输入框的后面 -->
        <template #append>@qq.com</template>
    </el-input>

    <h3>前置后置</h3>
    <el-input v-model="url2">
        <template #prepend>https://</template>
        <template #append>.com</template>
    </el-input>

    <h3>前置后置扩展 - 搜索</h3>
    <el-input placeholder="请输入课程名称">
        <template #prepend>
            <el-select v-model="selected" placeholder="请选择" style="width: 100px;">
                <el-option label="前端" value="1" />
                <el-option label="后端" value="2" />
                <el-option label="服务端" value="3" />
            </el-select>
        </template>
        <template #append>
            <el-button>
                <el-icon><Search /></el-icon>
            </el-button>
        </template>
    </el-input>
</div>
</template>

<style scoped>

</style>

2.7 单选和复选框

<script setup>
import { ref } from 'vue'

//单选框
const radio = ref("3")
const radio2 = ref("b")
const radio3 = ref("C")

const radioChange = (val) => {
    console.log("radioChange:", val)
}

const radioGroupChange = (val) => {
    console.log("radioGroupChange:", val)
}

//复选框
const checked = ref(["1", "2"])
const checked2 = ref([])

const checkboxGroupChange = (val) => {
    console.log("checkboxGroupChange", val)
}
</script>

<template>
<h3>单选框</h3>
<el-radio v-model="radio" value="1">前端</el-radio>
<el-radio v-model="radio" value="2">后端</el-radio>
<el-radio v-model="radio" value="3">服务端</el-radio>

<h3>单选框 - 事件绑定</h3>
<el-radio v-model="radio2" value="a" @change="radioChange">前端</el-radio>
<el-radio v-model="radio2" value="b" @change="radioChange">后端</el-radio>
<el-radio v-model="radio2" value="c" @change="radioChange">服务端</el-radio>

<h3>单选框组</h3>
<!-- 使用组以后,绑定数据只需要绑定一次,改变事件也是,不需要绑定到每个单选框上 -->
<el-radio-group v-model="radio3" @change="radioGroupChange">
    <el-radio value="A">前端</el-radio>
    <el-radio value="B">后端</el-radio>
    <el-radio value="C">服务端</el-radio>
</el-radio-group>

<h3>复选框</h3>
<el-checkbox-group v-model="checked">
    <el-checkbox value="1">前端</el-checkbox>
    <el-checkbox value="2">后端</el-checkbox>
    <el-checkbox value="3">服务端</el-checkbox>
</el-checkbox-group>

<h3>事件绑定</h3>
<el-checkbox-group v-model="checked2" @change="checkboxGroupChange">
    <el-checkbox value="1">前端</el-checkbox>
    <el-checkbox value="2">后端</el-checkbox>
    <el-checkbox value="3">服务端</el-checkbox>
</el-checkbox-group>
</template>

<style scoped>

</style>

2.8 下拉框

<script setup>
import { ref, reactive } from 'vue'

const selected = ref('2')
const selected2 = ref('')
const selected3 = ref('C')
const selected4 = ref(['1', '3'])

const data = reactive({
  options: [
    { value: 'A', label: '前端', },
    { value: 'B', label: '后端', },
    { value: 'C', label: '服务端', }
  ]
})

//回调
const selectChange = (val) => {
  console.log("selectChange:", val)
}
</script>

<template>
  <div style="width: 300px;">
    <h3>下拉框</h3>
    <el-select v-model="selected" placeholder="请选择">
      <el-option value="1" label="前端" />
      <el-option value="2" label="后端" />
      <el-option value="3" label="服务端" />
    </el-select>

    <h3>下拉框 - 事件绑定</h3>
    <el-select v-model="selected2" @change="selectChange" placeholder="请选择">
      <el-option value="a" label="前端" />
      <el-option value="b" label="后端" />
      <el-option value="c" label="服务端" />
    </el-select>

    <h3>动态下拉框</h3>
    <el-select v-model="selected3" placeholder="请选择">
      <el-option v-for="item in data.options" :value="item.value" :label="item.label" :key="item.value" />
    </el-select>

    <h3>多选 - multiple</h3>
    <!-- multiple属性表示多选 -->
    <el-select v-model="selected4" multiple @change="selectChange" placeholder="请选择">
      <el-option value="1" label="前端" />
      <el-option value="2" label="后端" />
      <el-option value="3" label="服务端" />
    </el-select>
  </div>
</template>

<style scoped></style>

2.9 时间选择器

时间选择器,默认是英文的,如果需要改成中文,需要引入中文语言包

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


//整体导入element-plus组件库
import ElementPlus from 'element-plus'  //导入element-plus组件库的所有模块和功能
import 'element-plus/dist/index.css'    //导入element-plus组件库所需的全局CSS样式

// 导入ElementPlus图标库
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

import zhCn from 'element-plus/dist/locale/zh-cn.mjs' //导入 ElementPlus 组件库的中文语言包

const app = createApp(App)

// 注册ElementPlus图标库
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

//app.use(ElementPlus) //将 ElementPlus 插件注册到 Vue 应用中s
app.use(ElementPlus, {
    locale: zhCn // 设置 ElementPlus 组件库的区域语言为中文简体
})

app.mount('#app')

导入成功后,时间选择器就已经更改为中文了

<script setup>
import { ref } from 'vue'

const date = ref('')

const dateChange = (val) => {
    console.log("dateChange:", val)
}
</script>

<template>
<h3>日期</h3>
<el-date-picker v-model="date" type="date" placeholder="请选择" />

<h3>日期时间</h3>
<el-date-picker v-model="date" type="datetime" placeholder="请选择" />

<h3>事件绑定</h3>
<el-date-picker v-model="date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" @change="dateChange" />
</template>

<style scoped>

</style>

3. 表单

<script setup>
import { ref } from 'vue'

const data = ref({
    name: '',
    radio: '',
    checkbox: [],
    date: '',
    select: '',
    multipleSelect: [],
    textarea: ''
})

const add = () => {
    console.log(data.value)
}

const reset = () => {
    data.value = {
        name: '',
        radio: '',
        checkbox: [],
        date: '',
        select: '',
        multipleSelect: [],
        textarea: ''
    }
}
</script>

<template>
<el-form label-width="80" style="width: 400px;">
    <el-form-item label="文本框">
        <el-input v-model="data.name" placeholder="请填写名称" />
    </el-form-item>

    <el-form-item label="单选框">
        <el-radio-group v-model="data.radio">
            <el-radio value="1">前端</el-radio>
            <el-radio value="2">后端</el-radio>
            <el-radio value="3">服务端</el-radio>
        </el-radio-group>
    </el-form-item>

    <el-form-item label="复选框">
        <el-checkbox-group v-model="data.checkbox">
            <el-checkbox value="a">前端</el-checkbox>
            <el-checkbox value="b">后端</el-checkbox>
            <el-checkbox value="c">服务端</el-checkbox>
        </el-checkbox-group>
    </el-form-item>

    <el-form-item label="日期时间">
        <el-date-picker v-model="data.date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
    </el-form-item>

    <el-form-item label="下拉框">
        <el-select v-model="data.select" placeholder="请选择">
            <el-option value="A" label="前端" />
            <el-option value="B" label="后端" />
            <el-option value="C" label="服务端" />
        </el-select>
    </el-form-item>

    <el-form-item label="多选框">
        <el-select v-model="data.multipleSelect" multiple placeholder="请选择">
            <el-option value="AA" label="前端" />
            <el-option value="BB" label="后端" />
            <el-option value="CC" label="服务端" />
        </el-select>
    </el-form-item>

    <el-form-item label="文本域">
        <el-input type="textarea" v-model="data.textarea" :rows="2" placeholder="请填写内容" />
    </el-form-item>

    <el-form-item>
        <el-button type="primary" @click="add">添加</el-button>
        <el-button @click="reset">重置</el-button>
    </el-form-item>
</el-form>
</template>

<style scoped>

</style>

4. 对话框

<script setup>
import { ref } from 'vue'

const data = ref({
  name: '',
  radio: '',
  checkbox: [],
  date: '',
  select: '',
  multipleSelect: [],
  textarea: ''
})

const add = () => {
  console.log(data.value)
}

const reset = () => {
  data.value = {
    name: '',
    radio: '',
    checkbox: [],
    date: '',
    select: '',
    multipleSelect: [],
    textarea: ''
  }
}

//对话框
const dialog = ref(false)

const dialogClose = () => {
  console.log("关闭")
}
</script>

<template>
  <el-button @click="dialog = true">打开</el-button>

  <!-- draggable 允许拖拽 -->
  <el-dialog v-model="dialog" width="500" title="标题" draggable @close="dialogClose">
    <el-form label-width="80">
      <el-form-item label="文本框">
        <el-input v-model="data.name" placeholder="请填写名称" />
      </el-form-item>

      <el-form-item label="单选框">
        <el-radio-group v-model="data.radio">
          <el-radio value="1">前端</el-radio>
          <el-radio value="2">后端</el-radio>
          <el-radio value="3">服务端</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="复选框">
        <el-checkbox-group v-model="data.checkbox">
          <el-checkbox value="a">前端</el-checkbox>
          <el-checkbox value="b">后端</el-checkbox>
          <el-checkbox value="c">服务端</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="日期时间">
        <el-date-picker v-model="data.date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
      </el-form-item>

      <el-form-item label="下拉框">
        <el-select v-model="data.select" placeholder="请选择">
          <el-option value="A" label="前端" />
          <el-option value="B" label="后端" />
          <el-option value="C" label="服务端" />
        </el-select>
      </el-form-item>

      <el-form-item label="多选框">
        <!-- multiple 允许多选 -->
        <el-select v-model="data.multipleSelect" multiple placeholder="请选择">
          <el-option value="AA" label="前端" />
          <el-option value="BB" label="后端" />
          <el-option value="CC" label="服务端" />
        </el-select>
      </el-form-item>

      <el-form-item label="文本域">
        <el-input type="textarea" v-model="data.textarea" :rows="2" placeholder="请填写内容" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="add">添加</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped></style>

5. 分页

<script setup>
const currentPage = (val) => {
    console.log("currentPage:",val)
}
</script>

<template>
<h3>page-size:每页显示记录数 total:总记录数</h3>
<el-pagination layout="prev, pager, next" :page-size="10" :total="50" />

<h3>background:显示背景</h3>
<el-pagination layout="prev, pager, next" :page-size="5" :total="50" background />

<h3>layout="total" 显示总数</h3>
<el-pagination layout="prev, pager, next, total" :page-size="5" :total="50" />

<h3>layout="jumper" 跳转</h3>
<el-pagination layout="prev, pager, next, jumper, total" :page-size="5" :total="50" />

<h3>事件绑定</h3>
<el-pagination layout="prev, pager, next" :page-size="5" :total="50" @current-change="currentPage" />
</template>

<style scoped>

</style>

6. 表格

<script setup>
import { ref } from 'vue'

const data = ref({
    arr: [
        { id: '1', name: '大海1号', web: '4399.com', date: '2025-03-16' },
        { id: '2', name: '大海2号', web: 'email.163.com', date: '2025-03-16' },
        { id: '3', name: '大海3号', web: '7k7k.com', date: '2025-03-16' },
        { id: '4', name: '大海4号', web: 'blog.xy21lin.cn', date: '2025-03-16' }
    ]
})

//选中的复选框
let idArr = []
const selected = (data) => {
    //console.log("selected", data)

    idArr = [] //重置

    data.forEach((value) => {
        idArr.push(value.id)
    })

    console.log("idArr:", idArr)
}

//删除
const del = () => {
    console.log("del:", idArr)
}

//编辑
const edit = (index, row) => {
    console.log("index:", index, "row:", row)
}    
</script>

<template>
<h3>表格</h3>
<el-table :data="data.arr" style="width: 800px;">
    <el-table-column prop="id" label="编号" width="80" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="web" label="网站" width="300" />
    <el-table-column prop="date" label="日期" />
</el-table>

<h3>带边框表格</h3>
<el-table :data="data.arr" border style="width: 800px;">
    <el-table-column prop="id" label="编号" width="80" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="web" label="网站" width="300" />
    <el-table-column prop="date" label="日期" />
</el-table>

<h3>设置高度固定表头</h3>
<el-table :data="data.arr" border height="120" style="width: 800px;">
    <el-table-column prop="id" label="编号" width="80" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="web" label="网站" width="300" />
    <el-table-column prop="date" label="日期" />
</el-table>

<h3>type="selection" 多选</h3>
<el-table :data="data.arr" border style="width: 800px;">
    <el-table-column type="selection" width="55" />

    <el-table-column prop="id" label="编号" width="80" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="web" label="网站" width="300" />
    <el-table-column prop="date" label="日期" />
</el-table>

<h3>按钮</h3>
<el-button type="primary" @click="del">删除</el-button>

<el-table :data="data.arr" @selection-change="selected" border style="width: 900px;margin: 3px 0;">
    <el-table-column type="selection" width="55"></el-table-column>

    <el-table-column prop="id" label="编号" width="80" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="web" label="网站" width="300" />
    <el-table-column prop="date" label="日期" />

    <el-table-column label="操作" width="150">
        <template #default="scope">
            <el-button size="small" type="primary" @click="edit(scope.$index, scope.row)">
                编辑
            </el-button>
            <el-button size="small">删除</el-button>
        </template>
    </el-table-column>
</el-table>

<el-pagination layout="prev, pager, next, jumper, total" :page-size="5" :total="50" />
</template>

<style scoped></style>

7. 按需导入

在前面的项目学习中, 我们都是直接导入整个 Element Plus 库, 这样会导致项目体积过大, 所以我们可以按需导入, 只导入我们需要的组件, 这样可以减少项目体积, 提高加载速度
接下来使用插件实现按需导入

在项目目录下打开终端,输入命令,安装 unplugin-vue-components 和 unplugin-auto-import 插件:

npm install -D unplugin-vue-components unplugin-auto-import

接下来再安装自动导入图标库的插件, 安装 unplugin-icons 插件:

npm install -D unplugin-icons

安装完成后,可以在package.json文件中查看到依赖:

  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "unplugin-auto-import": "^19.1.1",
    "unplugin-icons": "^22.1.0",
    "unplugin-vue-components": "^28.4.1",
    "vite": "^6.2.0"
  }

接下来,在vite.config.js文件中配置按需导入:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

//unplugin
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Icons from 'unplugin-icons/vite' //图标
import IconsResolver from 'unplugin-icons/resolver'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),

    AutoImport({
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'], 

      resolvers: [
        ElementPlusResolver(),
        // 自动导入图标组件
        IconsResolver(),
      ],
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep'],
        }),
      ],
    }),

    Icons({
      autoInstall: true,
    }),

  ],
})

接着对main.js进行修改,因为使用插件进行了按需导入,所以不需要再手动导入:

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

createApp(App).mount('#app')

最后,在App.vue文件中使用组件:

<script setup>
// 消息
const openMsg = () => {
  ElMessage({
    type: 'success', // success | warning | info | error
    message: 'dengruicode.com',
    showClose: true
  })
}

// 确认框
const openConfirm = () => {
  ElMessageBox.confirm('确认删除?', '标题', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  }).then(() => {
    console.log('确认')
  }).catch(() => {
    console.log('取消')
  })
}

// 通知
const openNotifiy = () => {
  ElNotification({
    title: '标题',
    message: '邓瑞编程',
    duration: 1500 // 展示时间 [单位:毫秒]
  })
}

// 通知2
const openNotifiy2 = () => {
  ElNotification({
    type: 'success', // success | warning | info | error
    title: '标题',
    message: 'dengruicode.com',
    duration: 1500,
    position: 'bottom-right'
  })
}

const url = ref('dengruicode.com')
</script>

<template>
  <h3>按钮</h3>
  <el-button>默认按钮</el-button>
  <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>

  <h3>图标</h3>
  <!-- <el-icon><Plus /></el-icon> -->
   <!-- 注意这里,icon明明使用插件配置了自动导入,但是图标不显示,这是因为命名规则的问题,使用插件导入后,命名规则发生了变化,需要使用i-ep-前缀,如:i-ep-Plus,i-ep-Edit,i-ep-Delete,i-ep-Loading,以及IEp-前缀,如:IEp-Edit,IEp-Delete,IEp-Loading和iEP-前缀 -->
  <el-icon>
    <i-ep-Plus />
  </el-icon> <!-- i-ep- -->
  <el-icon>
    <IEpEdit />
  </el-icon> <!-- IEp- -->
  <el-icon>
    <iEpDelete />
  </el-icon>
  <el-icon class="is-loading">
    <iEpLoading />
  </el-icon>

  <h3>提示框</h3>
  <el-button @click="openMsg">消息</el-button>
  <el-button @click="openConfirm">确认框</el-button>
  <el-button @click="openNotifiy">通知</el-button>
  <el-button @click="openNotifiy2">通知2</el-button>

  <h3>输入框</h3>
  <el-input v-model="url" placeholder="请输入网址" />
</template>

<style scoped></style>

注意: icon明明使用插件配置了自动导入,但是图标不显示,这是因为命名规则的问题,使用插件导入后,命名规则发生了变化,需要使用i-ep-前缀,如:i-ep-Plus,i-ep-Edit,i-ep-Delete,i-ep-Loading,以及IEp-前缀,如:IEp-Edit,IEp-Delete,IEp-Loading和iEP-前缀