当前位置：首页 > news >正文

JAVA-Web端学习6 ElementPlus

news 2026/6/11 9:15:32

桜の罠…抵抗できない

ElementPlus

ElementPlus是一款组件库，集成了组成网页的部件，例如超链接、按钮、图片、表格、分页等

入门程序

准备工作

创建vue项目

安装ElementPlus组件库

main.js中引入ElementPlus组件库

制作组件

访问ElementPlus官网，复制组件代码并调整

ElementPlus官网：https://element-plus.org/zh-CN

main.js中引入组件相关如下：

//main.js中引入ElementPlus组件库
import App from './App.vue'
import ElementPlus from 'element-plus'
//使用ElementPlus组件库
createApp(App).use(ElementPlus).mount('#app')

入门程序编写如下：

<script setup>
</script><template><div class="button-row"> //继承组件，将其中所有组件集中在一行<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="button-row"><el-button plain>Default</el-button><el-button type="primary" plain>Primary</el-button> //type控制背景色类型，plain控制颜色深浅<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>.button-row {margin-bottom: 10px; //设置类选择器，为其中组件设置底部外边距为10px}
</style>

效果如下：

常见组件

表格组件

表格组件关键在于清楚表格每一行绑定的数据data，以及每一列要展示的属性信息

示例代码如下：

<script 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><template><div class="tableData"><el-table :data="tableData" border style="width: 100%"><el-table-column prop="date" label="生日" width="180" /> //pro表示property，用于绑定列表的数据属性；label表示标签<el-table-column prop="name" label="姓名" width="180" /><el-table-column prop="address" label="住址" width="400s" /></el-table></div>
</template><style scoped>
</style>

示例效果如下：

分页条组件

用于在数据过多的情况下分页展示的组件

示例代码如下：

<script setup>import { ref } from 'vue'const currentPage = ref(1) //设置加载完成的停留页码const pageSize = ref(100) //设置默认页面大小const size = ref('default') //设置分页大小，存在三种类型：small，default，largeconst background = ref(false) //是否为分页按钮添加背景色const disabled = ref(false) //是否禁用分页const handleSizeChange = (val) => { //修改页面大小触发事件console.log(`${val} items per page`)}const handleCurrentChange = (val) => { //跳转页面触发事件console.log(`current page: ${val}`)}
</script><template><div class="demo-pagination-block"><div class="demonstration">All combined</div><el-paginationv-model:current-page="currentPage"v-model:page-size="pageSize":page-sizes="[10,50,100]":size="size":disabled="disabled":background="background"layout="total, sizes, prev, pager, next, jumper" //布局：总数 页面大小 上一页 页码 下一页 跳转:total="1000"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div>
</template><style scoped>
</style>

效果如下：

如果要将分页相关提示设置为中文，可在main.js中设置：

import zhCn from 'element-plus/es/locale/lang/zh-cn'createApp(App).use(ElementPlus,{locale: zhCn}).mount('#app')

效果如下：

对话框组件

使用对话框组件用于控制和显示互动弹出的对话框

示例代码如下，代码关键在于通过控制v-model绑定的属性（代码中为dialogTableVisible）的boolean值来控制对话框的显示：

<script setup>import { ref } from 'vue'let dialogTableVisible = ref(false)const gridData = [{date: '2016-05-02',name: 'John Smith',address: 'No.1518,  Jinshajiang Road, Putuo District',},{date: '2016-05-04',name: 'John Smith',address: 'No.1518,  Jinshajiang Road, Putuo District',},{date: '2016-05-01',name: 'John Smith',address: 'No.1518,  Jinshajiang Road, Putuo District',},{date: '2016-05-03',name: 'John Smith',address: 'No.1518,  Jinshajiang Road, Putuo District',},]
</script><template><div class="flex flex-wrap gap-1"><el-button class="!ml-0" plain @click="dialogTableVisible = true">Open a Table nested Dialog</el-button></div><el-dialog v-model="dialogTableVisible" title="Shipping address" width="800"><el-table :data="gridData"><el-table-column property="date" label="日期" width="150" /><el-table-column property="name" label="姓名" width="200" /><el-table-column property="address" label="地址" /></el-table></el-dialog>
</template><style scoped>
</style>

效果如下：

表单项组件

表单包含input、radio、select、checkbox等需要用户输入的组件。使用表单，您可以收集、验证和提交数据。

其中每一个el-form-item属性代表一个表单项

示例代码如下：

<script setup>import { ref } from 'vue'const formInline = ref({user: '',region: '',date: '',})const onSubmit = () => {console.log('Now submit : {} ',formInline.value)}
</script><template><el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="formInline.user" placeholder="请输入姓名" clearable /></el-form-item><el-form-item label="地区"><el-selectv-model="formInline.region"placeholder="请选择地区"clearable><el-option label="上海" value="上海" /><el-option label="北京" value="北京" /><el-option label="深圳" value="深圳" /><el-option label="广州" value="广州" /></el-select></el-form-item><el-form-item label="日期"><el-date-pickerv-model="formInline.date"type="date"placeholder="请选择日期"value-format="YYYY-MM-DD"clearable/></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">点击查询</el-button></el-form-item></el-form>
</template><style scoped>.demo-form-inline  {--el-input-width: 220px;}.demo-form-inline{--el-select-width: 220px;}
</style>

效果如下：