前言
ElementUI是基于Vue框架的组件库,由饿了么团队开源,具有非常全面的组件数量,Vue3后改名为ElementPlus。本文只会介绍常用的组件。
一个 Vue 3 UI 框架 | Element Plus (element-plus.org)
快速上手
安装
1
| npm install element-plus --save
|
安装成功后可以在package.json
中看到:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| { "name": "elementui", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "element-plus": "^2.7.3", "vue": "^3.4.21" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.4", "vite": "^5.2.0" } }
|
在main.js
中导入
1 2 3 4 5 6 7 8 9 10 11
| import { createApp } from 'vue' import App from './App.vue'
import ELementPlus from 'element-plus'
import "element-plus/dist/index.full.min.mjs"
const app = createApp(App)
app.use(ELementPlus) app.mount('#app')
|
之后就可以在项目中使用elementPlus组件。
VsCode插件
对于组件来说,可能有非常多的属性,如果每次都要去官网查看相应的属性值就太麻烦了,如果使用ElementPlus推荐使用element-ui-helper
插件,作者是胡浪。
安装后鼠标悬停在组件标签上即可看到所有的属性提示,对于一些简单的就不需要去官网查看。
常用的属性有样式、形状和大小。
在App.vue
中编写组件标签:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| <script setup>
</script>
<template> <h3>按钮组件</h3>
<el-button type="primary">按钮1</el-button> <el-button type="success">按钮1</el-button> <el-button type="primary">按钮1</el-button> <el-button type="warning">按钮1</el-button> <el-button type="danger">按钮1</el-button> <el-button type="info">按钮1</el-button> <el-button type="text">按钮1</el-button>
<h3>按钮形状</h3> <el-button round>round</el-button> <el-button circle>circle</el-button> <el-button plain>plain</el-button> <el-button loading>loading</el-button> <el-button disabled>disabled</el-button> <el-button round loading>round loading</el-button>
<h3>按钮尺寸</h3> <el-button>default</el-button> <el-button size="small">small</el-button> <el-button size="medium">medium</el-button> <el-button size="large">large</el-button>
</template>
<style scoped>
</style>
|
图标 icon
需要先在main.js
中导入图标
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| import { createApp } from 'vue' import App from './App.vue'
import ELementPlus from 'element-plus'
import "element-plus/dist/index.css"
import * as ELementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for(const [key,component] of Object.entries(ELementPlusIconsVue)){ app.component(key,component) }
app.use(ELementPlus) app.mount('#app')
|
之后就可以在组件中编写代码,也可以将图标和按钮组合起来:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
| <script setup>
</script>
<template> <h3>图标</h3> <el-icon><Plus/></el-icon> <el-icon><Edit/></el-icon> <el-icon><Delete/></el-icon> <el-icon><Search/></el-icon> <el-icon><Setting/></el-icon> <el-icon><Upload/></el-icon> <el-icon><Download/></el-icon> <el-icon><Back/></el-icon> <el-icon><Close/></el-icon> <el-icon><Check/></el-icon> <el-icon><More/></el-icon>
<h3>属性</h3> <el-icon size="large" color="red"><Plus/></el-icon> <el-icon size="medium" color="blue"><Edit/></el-icon> <el-icon size="small" color="green"><Delete/></el-icon>
<h3>按钮和图标组合</h3> <el-button type="primary "> <el-icon><Search/></el-icon> <span>搜索</span> </el-button>
<el-button type="primary" circle> <el-icon><Search/></el-icon> </el-button>
<h3>按钮组</h3> <el-button-group> <el-button type="primary"> <el-icon><Back/></el-icon> <span>返回</span> </el-button> <el-button type="primary"> <el-icon><Close/></el-icon> <span>关闭</span> </el-button> <el-button type="primary"> <el-icon><Check/></el-icon> <span>确定</span> </el-button> </el-button-group>
</template>
<style scoped>
</style>
|
提示框 Message
有三种常见的提示框:
- ElMessage - 上侧滑下的消息条
- ElMessageBox - 消息组合框 可选择确认或者取消
- ElNotification - 右侧出来的消息弹窗
type都默认有四种:success | info | error | warning
可以和按钮图标组合来展示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87
| <script setup> import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
const openMessage = () => { ElMessage({ message: '打开成功', type: 'success', showClose: true, shapeFlag: 'el-icon-success', duration: 2000 }); };
const closeConfirm = () => { ElMessageBox.confirm('是否关闭', '标题', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { ElMessage({ message: '关闭成功', type: 'success' }); }).catch(() => { ElMessage({ message: '已取消关闭', type: 'info' }); }); };
const openNotification = () => { ElNotification({ title: '标题', message: '打开成功', type: 'success', duration: 2000, position: 'top-right' }); };
const openNotification2 = () => { ElNotification({ title: '标题', message: '打开失败', type: 'error', duration: 2000, position: 'bottom-right', }); }; </script>
<template> <el-button type="primary" @click="openMessage"> <el-icon> <Open /> </el-icon> <span>打开</span> </el-button>
<el-button type="warning" @click="closeConfirm"> <el-icon> <Close /> </el-icon> <span>关闭</span> </el-button>
<el-button type="info" @click="openNotification"> <el-icon> <More /> </el-icon> <span>通知1</span> </el-button>
<el-button type="success" @click="openNotification2"> <el-icon> <Setting /> </el-icon> <span>通知2</span> </el-button> </template>
<style scoped></style>
|
常用的导航分为menu
、breadcrumb
和dropdown
三种
具体的如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90
| <script setup> import { ref } from 'vue'
const selectedIndex = ref("1")
const defaultOpeneds = ref(["1","3"])
const selected = (index, indexPath) => { console.log("index:", index, "indexPath:", indexPath) }
const userCommand = (command) => { console.log("command:",command) } </script>
<template> <h3>垂直导航</h3> <el-menu mode="vertical" :default-active="selectedIndex" @select="selected" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" style="width: 200px;"> <el-menu-item index="1">Home</el-menu-item> <el-sub-menu index="2"> <template #title>About</template> <el-menu-item index="2-1">Company</el-menu-item> <el-menu-item index="2-2">Team</el-menu-item> <el-menu-item index="2-3">Careers</el-menu-item> </el-sub-menu> <el-menu-item index="3">Contact</el-menu-item> <el-menu-item index="4">Blog</el-menu-item>
</el-menu>
<h3>面包屑</h3> <el-breadcrumb separator="/"> <el-breadcrumb-item><a href="#">about</a></el-breadcrumb-item> <el-breadcrumb-item>Company</el-breadcrumb-item> <el-breadcrumb-item>Me</el-breadcrumb-item> </el-breadcrumb>
<h3>下拉菜单</h3> <el-dropdown @command="userCommand"> <span> 个人中心<el-icon><User/></el-icon> </span> <template #dropdown> <el-dropdown-item command="order">订单</el-dropdown-item> <el-dropdown-item command="logout">退出</el-dropdown-item> </template> </el-dropdown>
<h3>垂直导航-默认展开和自定义样式</h3> <el-menu :default-active="selectedIndex" @select="selected" :default-openeds="defaultOpeneds" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" style="width: 200px;"> <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>
</template>
<style scoped></style>
|
标签页 tabs
标签页最重要的是动态添加和删除的逻辑。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
| <script setup>
import { ref, reactive } from 'vue';
const selectedName = ref('2');
const tabClick = (tab, event) => { console.log("tab", tab.props, "event", event); }
const tab = reactive({ arr: [ { name: 1, label: "主页", content: "内容1" }, { name: 2, label: "我", content: "内容2" }, { name: 3, label: "订单", content: "内容3" } ] })
const tabAdd = () => { let index = tab.arr.length + 1; tab.arr.push( { name: index, label: `标签${index}`, content: `内容${index}` } ); }
const tabRemove = (name) => { console.log("name", name); const index = tab.arr.findIndex(item => item.name === name); tab.arr.splice(index, 1); } </script>
<template> <h3>标签页</h3>
<el-tabs v-model="selectedName" @tab-click="tabClick" type="border-card"> <el-tab-pane label="主页" name="1">内容1</el-tab-pane> <el-tab-pane label="我" name="2">内容2</el-tab-pane> <el-tab-pane label="订单" name="3">内容3</el-tab-pane>
</el-tabs>
<h3>动态添加/删除</h3> <el-button type="primary" @click="tabAdd">添加</el-button> <el-tabs v-model="selectedName" closable @tab-remove="tabRemove" type="card"> <el-tab-pane v-for="item in tab.arr" :key="item.name" :label="item.label" :name="item.name"> {{ item.content }} </el-tab-pane> </el-tabs> </template>
<style scoped></style>
|
输入框主种类繁多。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
| <script setup>
import { el } from 'element-plus/es/locales.mjs'; import { ref, reactive } from 'vue';
const name = ref('')
const password = ref('')
const content = ref('')
const selected = ref('1')
</script>
<template> <div style="width: 400px;"> <h3>输入框</h3> <el-input v-model="name" clearable placeholder="请输入用户名"></el-input>
<h3>密码框</h3> <el-input v-model="password" show-password placeholder="请输入密码"></el-input>
<h3>文本域</h3> <el-input type="textarea" v-model="content" rows="2"></el-input>
<h3>输入框-输入内容的限制</h3> <el-input maxlength="10" show-word-limit></el-input> <h3>文本域-输入内容的限制</h3> <el-input type="textarea" v-model="content" maxlength="10" show-word-limit></el-input>
<h3>前置</h3> <el-input v-model="name" placeholder="请输入内容"> <template #prepend>http://</template> </el-input>
<h3>后置</h3> <el-input v-model="name" placeholder="请输入内容"> <template #append>.com</template>、 </el-input>
<h3>前置加后置</h3> <el-input v-model="name" placeholder="请输入内容"> <template #prepend>http://</template> <template #append>.com</template> </el-input>
<h3>混合案例</h3> <el-input placeholder="请输入你的选择" v-model="name"> <template #prepend> <el-select v-model="selected" placeholder="请选择" style="width: 100px;"> <el-option label="前端" value="1"></el-option> <el-option label="后端" value="2"></el-option> <el-option label="服务端" value="3"></el-option> </el-select> </template> <template #append> <el-button> <el-icon><Search/></el-icon> <span>搜索</span> </el-button> </template> </el-input> </div> </template>
<style scoped></style>
|
单选框、复选框 radio checkbox
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
| <script setup> import { ref } from 'vue';
const radio = ref("3") const radio2 = ref("c") const radio3 = ref("C")
const check = ref(["1"]) const check2 = ref(["2"])
const changeRadio = (value) => { console.log("radio value change", value) }
const checkGroupChange = (value) => { console.log("check value change", value) } </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="changeRadio">前端</el-radio> <el-radio v-model="radio2" value="b" @change="changeRadio">后端</el-radio> <el-radio v-model="radio2" value="c" @change="changeRadio">服务端</el-radio>
<h3>单选框组</h3> <el-radio-group v-model="radio3" @change="changeRadio"> <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="check"> <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="check2" @change="checkGroupChange"> <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>
|
下拉框 select
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
| <script setup> import { ref, reactive } from 'vue';
const checked = ref("2"); const checked2 = ref("C");
const selectChange = (val) => { console.log("选中的值", val); }
const data = reactive({ options: [ { label: "前端", value: "A" }, { label: "后端", value: "B" }, { label: "服务端", value: "C" }, ] })
const selectMultipleChange = (val) => { console.log("选中的值", val); }
</script>
<template> <h3>下拉框</h3> <el-select placeholder="请选择" v-model="checked"> <el-option label="前端" value="1"></el-option> <el-option label="后端" value="2"></el-option> <el-option label="服务端" value="3"></el-option> </el-select>
<h3>下拉框-绑定事件</h3> <el-select placeholder="请选择" v-model="checked" @change="selectChange"> <el-option label="前端" value="1"></el-option> <el-option label="后端" value="2"></el-option> <el-option label="服务端" value="3"></el-option> </el-select>
<h3>动态下拉框</h3> <el-select placeholder="请选择" v-model="checked2"> <el-option v-for="item in data.options" :key="item.value" :label="item.label" :value="item.value"> {{ item.label }} </el-option> </el-select>
<h3>下拉框多选</h3> <el-select placeholder="请选择" v-model="checked" multiple @change="selectMultipleChange"> <el-option label="前端" value="1"></el-option> <el-option label="后端" value="2"></el-option> <el-option label="服务端" value="3"></el-option> </el-select> </template>
<style scoped></style>
|
日期选择器 date-picker
日期的获取如果不使用value-format
,那么控制台打印的就是时间戳的形式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| <script setup>
import { ref } from 'vue';
const date = ref("")
const dateChenge = (val) => { console.log("change", val) }
</script>
<template> <h3>日期</h3> <el-date-picker v-model="date" type="date" placeholder="请选择日期"></el-date-picker>
<h3>日期时间</h3> <el-date-picker v-model="date" type="datetime" placeholder="请选择日期时间"></el-date-picker>
<h3>事件绑定</h3> <el-date-picker v-model="date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择日期" @change="dateChenge"></el-date-picker> </template>
<style scoped></style>
|
将控件转化为中文的形式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| import { createApp } from 'vue' import App from './App.vue'
import ELementPlus from 'element-plus'
import "element-plus/dist/index.css"
import * as ELementPlusIconsVue from '@element-plus/icons-vue' import { zhCn } from 'element-plus/es/locales.mjs'
const app = createApp(App)
for(const [key,component] of Object.entries(ELementPlusIconsVue)){ app.component(key,component) }
app.use(ELementPlus,{locale:zhCn}) app.mount('#app')
|
将之前的所有控件使用el-form-item
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
| <script setup>
import { ref } from 'vue';
const data = ref({ name: "", radio: "", checkbox: [], select: "", date: "", multipleSelect: [], textarea: "" })
const add = () => { console.log(data.value) }
const reset = () => { data.value = { name: "", radio: "", checkbox: [], select: "", date: "", multipleSelect: [], textarea: "" } } </script>
<template> <el-form> <el-form-item label="文本框"> <el-input v-model="data.name" placeholder="请填写名称"></el-input> </el-form-item>
<el-form-item label="单选框"> <el-radio-group v-model="data.radio"> <el-radio label="1">选项1</el-radio> <el-radio label="2">选项2</el-radio> <el-radio label="3">选项3</el-radio> </el-radio-group> </el-form-item>
<el-form-item label="复选框"> <el-checkbox-group v-model="data.checkbox"> <el-checkbox label="1">选项1</el-checkbox> <el-checkbox label="2">选项2</el-checkbox> <el-checkbox label="3">选项3</el-checkbox> </el-checkbox-group> </el-form-item>
<el-form-item label="日期选择器"> <el-date-picker v-model="data.date" type="date" value-format="YYYY-MM-DD"></el-date-picker> </el-form-item>
<el-form-item label="下拉选择框"> <el-select v-model="data.select" placeholder="请选择"> <el-option label="选项1" value="1"></el-option> <el-option label="选项2" value="2"></el-option> <el-option label="选项3" value="3"></el-option> </el-select> </el-form-item>
<el-form-item label="多选下拉框"> <el-select v-model="data.multipleSelect" multiple placeholder="请选择"> <el-option label="选项1" value="1"></el-option> <el-option label="选项2" value="2"></el-option> <el-option label="选项3" value="3"></el-option> </el-select> </el-form-item>
<el-form-item label="文本域"> <el-input type="textarea" v-model="data.textarea" placeholder="请输入内容"></el-input> </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>
|
对话框 dialog
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111
| <script setup>
import { ref } from 'vue';
const data = ref({ name: "", radio: "", checkbox: [], select: "", date: "", multipleSelect: [], textarea: "" })
const add = () => { console.log(data.value) }
const reset = () => { data.value = { name: "", radio: "", checkbox: [], select: "", date: "", multipleSelect: [], textarea: "" } }
const dialog = ref(false)
const openDialog = () => { dialog.value = true console.log('打开') }
const dialogClose = () => { dialog.value = false console.log('关闭') } </script>
<template> <h3>对话框</h3>
<el-button type="primary" @click="openDialog"> <el-icon> <Open /> </el-icon><span>打开</span> </el-button>
<el-dialog v-model="dialog" draggable @close="dialogClose"> <el-form> <el-form-item label="文本框"> <el-input v-model="data.name" placeholder="请填写名称"></el-input> </el-form-item>
<el-form-item label="单选框"> <el-radio-group v-model="data.radio"> <el-radio value="1">选项1</el-radio> <el-radio value="2">选项2</el-radio> <el-radio value="3">选项3</el-radio> </el-radio-group> </el-form-item>
<el-form-item label="复选框"> <el-checkbox-group v-model="data.checkbox"> <el-checkbox value="1">选项1</el-checkbox> <el-checkbox value="2">选项2</el-checkbox> <el-checkbox value="3">选项3</el-checkbox> </el-checkbox-group> </el-form-item>
<el-form-item label="日期选择器"> <el-date-picker v-model="data.date" type="date" value-format="YYYY-MM-DD"></el-date-picker> </el-form-item>
<el-form-item label="下拉选择框"> <el-select v-model="data.select" placeholder="请选择"> <el-option label="选项1" value="1"></el-option> <el-option label="选项2" value="2"></el-option> <el-option label="选项3" value="3"></el-option> </el-select> </el-form-item>
<el-form-item label="多选下拉框"> <el-select v-model="data.multipleSelect" multiple placeholder="请选择"> <el-option label="选项1" value="1"></el-option> <el-option label="选项2" value="2"></el-option> <el-option label="选项3" value="3"></el-option> </el-select> </el-form-item>
<el-form-item label="文本域"> <el-input type="textarea" v-model="data.textarea" placeholder="请输入内容"></el-input> </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>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| <script setup>
import { ref } from 'vue';
const currentPage = ref(3); const current_change = (val) => { console.log("当前页: ", val); } </script>
<template>
<h3>page-size:每页显示记录数 total:总记录数</h3> <el-pagination layout="prev,pager,next" :page-size="10" :total="50"></el-pagination>
<h3>background:背景色</h3> <el-pagination background layout="prev,pager,next" :page-size="5" :total="50"></el-pagination>
<h3>跳转和总数 打印当前的页码 默认的页码</h3> <el-pagination :current-page="currentPage" background layout="prev,pager,next,jumper,total" :page-size="5" :total="50" @current-change="current_change"></el-pagination> </template>
<style scoped></style>
|
表格 table
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
| <script setup> import { ref, reactive } from 'vue';
let idArr = []
const selected = (data) => { idArr = []
for (let i = 0; i < data.length; i++) { idArr.push(data[i].id) }
console.log("idArr", idArr) }
const data = reactive({ arr: [ { id: 1, name: '张三', web: 'www.baidu.com', date: '2021-09-01' }, { id: 2, name: '李四', web: 'www.baidu.com', date: '2021-09-02' }, { id: 3, name: '王五', web: 'www.baidu.com', date: '2021-09-03' }, { id: 4, name: '赵六', web: 'www.baidu.com', date: '2021-09-04' }, ] })
const edit = (index, row) => { console.log("index:", index, "row:", row) }
const del = (index) => { data.arr.splice(index, 1) }
const currentChange = (value) => { console.log("value", value) } </script>
<template> <h3>表格</h3> <el-table :data="data.arr" border height="120"> <el-table-column label="编号" prop="id"></el-table-column> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="网站" prop="web"></el-table-column> <el-table-column label="日期" prop="date"></el-table-column> </el-table>
<h3>多选</h3>
<h3>表格</h3> <el-table :data="data.arr" border> <el-table-column type="selection"></el-table-column> <el-table-column label="编号" prop="id"></el-table-column> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="网站" prop="web"></el-table-column> <el-table-column label="日期" prop="date"></el-table-column> </el-table>
<h3>表格+分页</h3> <el-table @selection-change="selected" @current-change="currentChange" :data="data.arr" border> <el-table-column type="selection"></el-table-column> <el-table-column label="编号" prop="id"></el-table-column> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="网站" prop="web"></el-table-column> <el-table-column label="日期" prop="date"></el-table-column> <el-table-column label="操作"> <template #default="scope"> <el-button size="small" type="primary" @click="edit(scope.$index, scope.row)">编辑</el-button> <el-button size="small" type="danger" @click="del">删除</el-button> </template> </el-table-column> </el-table> <el-pagination layout="prev, pager, next" :total="400"></el-pagination> </template>
<style scoped></style>
|
按需导入
对于组件需要安装插件
1
| npm install -D unplugin-vue-components unplugin-auto-import
|
可以在package.json
文件中看到效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| { "name": "elementui", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "element-plus": "^2.7.3", "vue": "^3.4.21" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.4", "unplugin-auto-import": "^0.17.6", "unplugin-vue-components": "^0.27.0", "vite": "^5.2.0" } }
|
之后需要配置vite.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite"; import Components from "unplugin-vue-components/vite"; import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
export default defineConfig({ plugins: [ vue(),
AutoImport({ imports: ["vue"],
resolvers: [ ElementPlusResolver(), ], }), Components({ resolvers: [ ElementPlusResolver(), ], }), ], });
|
之后修改main.js
1 2 3 4 5
| import { createApp } from 'vue' import App from './App.vue'
const app = createApp(App) app.mount('#app')
|
对于组件来说,也需要安装插件:
1
| npm install -D unplugin-icons
|
package.json
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| { "name": "elementui", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "element-plus": "^2.7.3", "vue": "^3.4.21" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.4", "unplugin-auto-import": "^0.17.6", "unplugin-icons": "^0.19.0", "unplugin-vue-components": "^0.27.0", "vite": "^5.2.0" } }
|
在vite.config.js
中添加代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
| import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue";
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'
export default defineConfig({ plugins: [ vue(),
AutoImport({ imports: ["vue"],
resolvers: [ ElementPlusResolver(), IconsResolver(), ], }), Components({ resolvers: [ ElementPlusResolver(), IconsResolver({ enabledCollections: ["ep"], }), ], }),
Icons({ autoInstall: true, }), ], });
|
然后在所有图标的前面加上i-ep-
如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
| <script setup> import { ref, reactive } from 'vue';
let idArr = []
const selected = (data) => { idArr = []
for (let i = 0; i < data.length; i++) { idArr.push(data[i].id) }
console.log("idArr", idArr) }
const data = reactive({ arr: [ { id: 1, name: '张三', web: 'www.baidu.com', date: '2021-09-01' }, { id: 2, name: '李四', web: 'www.baidu.com', date: '2021-09-02' }, { id: 3, name: '王五', web: 'www.baidu.com', date: '2021-09-03' }, { id: 4, name: '赵六', web: 'www.baidu.com', date: '2021-09-04' }, ] })
const edit = (index, row) => { console.log("index:", index, "row:", row) }
const del = (index) => { data.arr.splice(index, 1) }
const currentChange = (value) => { console.log("value", value) } </script>
<template>
<h3>表格+分页</h3> <el-table @selection-change="selected" @current-change="currentChange" :data="data.arr" border> <el-table-column type="selection"></el-table-column> <el-table-column label="编号" prop="id"></el-table-column> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="网站" prop="web"></el-table-column> <el-table-column label="日期" prop="date"></el-table-column> <el-table-column label="操作"> <template #default="scope"> <el-button size="small" type="primary" @click="edit(scope.$index, scope.row)"> <el-icon><i-ep-Edit /></el-icon><span>编辑</span> </el-button> <el-button size="small" type="danger" @click="del"> <el-icon><i-ep-Delete /></el-icon><span>删除</span> </el-button> </template> </el-table-column> </el-table> <el-pagination layout="prev, pager, next" :total="400"></el-pagination> </template>
<style scoped></style>
|