Element Plus
Element：是饿了么团队研发的，基于 Vue3，面向设计师和开发者的组件库
组件：组成网页的部件，例如 超链接，按钮，图片，表格，表单，分页条等等。
官网：一个 Vue 3 UI 框架 | Element Plus
入门程序
准备工作：
1：创建 vue 项目
2：参照官方文档，安装 Element Plus 组件库（在当前过程目录下）：
npm install element-plus@2.2.4 --save 3：main.js 中引入 Element Plus 组件库（参照官方文档）
import { createApp } from 'vue'//引入ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'createApp(App).use(ElementPlus).mount('#app')
我们想实现按钮的话，可以直接去 Element 官网复制代码即可
<script setup></script><template><div class="mb-4"><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button></div><div class="mb-4"><el-button plain>Plain</el-button><el-button type="primary" plain>Primary</el-button><el-button type="success" plain>Success</el-button><el-button type="info" plain>Info</el-button><el-button type="warning" plain>Warning</el-button><el-button type="danger" plain>Danger</el-button></div>
</template><style scoped>
.mb-4 {margin-bottom: 4px;
}
</style>
然后导入到 App.vue 里面就可以了
<script setup>
import ElementPlus from './views/ElementPlusDemo.vue'
</script><template>
<ElementPlus></ElementPlus>
</template><style scoped></style>
常见组件
表格组件
<template><el-table :data="tableData" border style="width: 100%"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table>
</template><script lang="ts" setup>
const tableData = [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
]
</script>
分页条组件
<div class="demonstration">All combined</div><el-paginationv-model:current-page="currentPage4"v-model:page-size="pageSize4":page-sizes="[100, 200, 300, 400]":size="size":disabled="disabled":background="background"layout="total, sizes, prev, pager, next, jumper":total="400"@size-change="handleSizeChange"@current-change="handleCurrentChange"<script lang="ts" setup>
import { ref } from 'vue'import type { ComponentSize } from 'element-plus'const currentPage4 = ref(4)const pageSize4 = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)const handleSizeChange = (val: number) => {console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {console.log(`current page: ${val}`)
}
</script>对话框组件
在保留当前页面的情况下，告知用户并承载相关操作。
<template><el-button plain @click="dialogVisible = true">Click to open the Dialog</el-button><el-dialogv-model="dialogVisible"title="Tips"width="500":before-close="handleClose"><span>This is a message</span><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">Cancel</el-button><el-button type="primary" @click="dialogVisible = false">Confirm</el-button></div></template></el-dialog>
</template><script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'const dialogVisible = ref(false)const handleClose = (done: () => void) => {ElMessageBox.confirm('Are you sure to close this dialog?').then(() => {done()}).catch(() => {// catch error})
}
</script>表单组件
<template><el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="Approved by"><el-input v-model="formInline.user" placeholder="Approved by" clearable /></el-form-item><el-form-item label="Activity zone"><el-selectv-model="formInline.region"placeholder="Activity zone"clearable><el-option label="Zone one" value="shanghai" /><el-option label="Zone two" value="beijing" /></el-select></el-form-item><el-form-item label="Activity time"><el-date-pickerv-model="formInline.date"type="date"placeholder="Pick a date"clearable/></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">Query</el-button></el-form-item></el-form>
</template><script lang="ts" setup>
import { reactive } from 'vue'const formInline = reactive({user: '',region: '',date: '',
})const onSubmit = () => {console.log('submit!')
}
</script><style>
.demo-form-inline .el-input {--el-input-width: 220px;
}.demo-form-inline .el-select {--el-select-width: 220px;
}
</style>
案例
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';//表单
const emp = ref({name: '',gender: '',job: ''})//钩子函数
onMounted(() => {search();
})//查询
const search = async () => {const result = await axios.get(`https://web-server.itheima.net/emps/list?name=${emp.value.name}&gender=${emp.value.gender}&job=${emp.value.job}`);empList.value = result.data.data;
}//清空
const clear = () => {emp.value = {name: '',gender: '',job: ''};search();
}const empList = ref([]);
</script><template><div id="container"><!-- 搜索表单 --><el-form :inline="true" :model="emp" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="emp.name" placeholder="请输入姓名" /></el-form-item><el-form-item label="性别"><el-select v-model="emp.gender" placeholder="请选择"><el-option label="男" value="1" /><el-option label="女" value="2" /></el-select></el-form-item><el-form-item label="职位"><el-select v-model="emp.job" placeholder="请选择"><el-option label="班主任" value="1" /><el-option label="讲师" value="2" /><el-option label="学工主管" value="3" /><el-option label="教研主管" value="4" /><el-option label="咨询师" value="5" /></el-select></el-form-item><el-form-item><el-button type="primary" @click="search">查询</el-button><el-button type="info" @click="clear">清空</el-button></el-form-item></el-form><!-- 表格 --><el-table :data="empList" border style="width: 100%"><el-table-column prop="id" label="ID" width="100" align="center"/><el-table-column prop="name" label="姓名" width="120" align="center"/><el-table-column label="头像" width="180" align="center"><template #default="scope"><img :src="scope.row.image" height="40px"></template></el-table-column><el-table-column label="性别" width="180" align="center"><template #default="scope">{{ scope.row.gender == 1 ? '男' : '女'}}</template></el-table-column><el-table-column label="职位" width="180" align="center"><template #default="scope"><span v-if="scope.row.job == 1">班主任</span><span v-else-if="scope.row.job == 2">讲师</span><span v-else-if="scope.row.job == 3">学工主管</span><span v-else-if="scope.row.job == 4">教研主管</span><span v-else-if="scope.row.job == 5">咨询师</span><span v-else>其他</span></template></el-table-column><el-table-column prop="entrydate" label="入职日期" width="180" align="center"/><el-table-column prop="updatetime" label="更新时间" align="center"/></el-table></div>
</template><style scoped>
#container {width: 70%;margin-left: 15%;margin-right: 15%;
}
</style>