element是饿了么团队研发的,一套为开发者,设计师和产品经理提供的基于Vue2.0的桌面端组件库。官网:Element - 网站快速成型工具
有了element组件库,开发人员就可以通过CV(复制粘贴。)制作出精美的前端页面。下面是一个简单页面的示例,我将为大家演示如何制作一个这样的页面。
1.首先我们可以看到,这个页面分为了三部分,一部分是左侧的导航栏,上边的菜单栏和中间部分。在element组件库中提供了很多种布局方式,我们可以打开官网查看:
(1)点击右上角的组件按钮:
(2)在左侧可以找到布局容器,如图:
往下滑有很多布局的样式,我们选择合适我们页面的三种布局结构:
接下来我们可以看到在下面有显示代码,我们点击显示代码,element组件库已经为我们写好了各种布局容器的代码,我们只需要选择合适的布局容器复制代码到VSCode即可:
2.在左侧菜单栏中我们看到有导航栏下拉有两部分内容,我们在element组件库中同样可以找到,还是在布局容器中:
同样将其下面相对应的代码复制过去。
我们按照页面的样式修改一下代码内容(这里我直接复制了最终的代码,因为流程都是一样的,只需要找到对应的组件然后复制粘贴代码):
<template>
<div>
<el-container style="height: 700px; border: 1px solid #eee">
<el-header style="font-size:40px; background-color: rgb(238,241,246);">Vue-element组件案例</el-header>
<el-container>
<el-aside width="200px">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
<el-menu-item index="1-1">部门管理</el-menu-item>
<el-menu-item index="1-2">员工管理</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main> <!-- 页面中间主要部分 -->
<!-- 表单 -->
<el-form :inline="true" :model="SearchForm" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="SearchForm.name" placeholder="请输入员工姓名"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="SearchForm.gender" placeholder="请选择">
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="入职时间">
<el-date-picker v-model="SearchForm.entrydate" type="daterange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<!-- 表格 -->
<el-table :data="tableData" border> <!-- 表格加边框只需要在标签中增加border属性 -->
<el-table-column prop="name" label="姓名" width="140"></el-table-column>
<el-table-column prop="image" label="图像" width="120"></el-table-column>
<el-table-column prop="gender" label="性别" width="140"></el-table-column>
<el-table-column prop="job" label="职位" width="140"></el-table-column>
<el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
<el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
<el-table-column label="操作">
<el-button type="primary" size="mini">编辑</el-button>
<el-button type="danger" size="mini">删除</el-button>
</el-table-column>
</el-table>
<br>
<!-- 分页条 -->
<el-pagination background layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:total="1000"></el-pagination>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
data() {
return {
SearchForm: {
name: "",
gender: "",
entrydate: []
},
tableData: [],
ruleForm: {
date1: '',
date2: '',
},
rules: {
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
}
}
},
methods: {
onSubmit() {
alert('查询数据');
},
handleSizeChange:function(val){
alert("每页记录数发生变化"+val)
},
handleCurrentChange:function(val){
alert("页码发生变化"+val)
}
}
}
</script>
<style></style>
注意:相对应的数据模型和方法都要在<script>标签中写明。大家可以复制代码在浏览器中查看页面效果。
标签:Vue,val,前端,布局,element,组件,代码,页面 From: https://blog.csdn.net/m0_74048455/article/details/143495036