用五百丁做名字的简历网站,上海做网站的故事哪家好,制作网页的基本技术标准,中企动力会员控制平台一.目标
实现下面这个页面#xff0c;表格中的数据使用axois异步加载数据 二.实现步骤
首先在vue项目的views文件夹中新建一个tlias文件夹#xff0c;用来存储该案例的相关组件。员工页面组件#xff08;EmpView.vue#xff09;和部门页面组件#xff08;DeptView.vue表格中的数据使用axois异步加载数据 二.实现步骤
首先在vue项目的views文件夹中新建一个tlias文件夹用来存储该案例的相关组件。员工页面组件EmpView.vue和部门页面组件DeptView.vue分别在tlias文件夹中创建好。 在App.vue中的template标签中引入emp-view标签并在script标签中导入EmpView.vue组件。 components中加入EmpView组件。
!-- 模板部分由他生成HTML代码 相当于vue当中的视图部分 --
templatediv !-- div是根标签一个template标签中只能有一个根标签也即只能有一个template标签 --!-- h1{{ message }}/h1 --!-- element-view/element-view --emp-view/emp-view!-- router-view/router-view --/div
/template!-- JS代码定义vue当中的数据模型以及当中的方法 --
script
/*
import ElementView from ./views/element/ElementView.vue 将ElementView.vue组件文件导入并重新命名为ElementView 注意template标签里面没有定义标签那么import的话会报错
*/import EmpView from ./views/tlias/EmpView.vueexport default {components: { EmpView }, // components里面也不能有template中未定义的标签的vue组件data () {return {/* message:Hello Vue */}},methods: {}}
/script!-- 定义CSS样式 --
style/style1.页面基本布局 首先页面呈现出顶栏左边栏然后主区域的整体布局因此要实现这种布局。我们在element组件中找到这一布局。 然后找到对应的代码复制到员工页面组件的template标签中。
el-containerel-headerHeader/el-headerel-containerel-aside width200pxAside/el-asideel-mainMain/el-main/el-container
/el-container
浏览器页面结构如下 在实现了基本布局后发现这三部分并没有边框线因此要在这三部分中加上边框线。 第一行代码改下
el-container styleheight: 800px; border: 1px solid #eee
下面在el-header标签中设置要展示的标题。
el-header stylefont-size: 40px; background-color: #6495ED;tlias智能学习辅助系统/el-header
header部分设计好后接下来在el-aside标签中设置我们需要的样式 。首先在element组件库中寻找符合我们要求的样式。 el-aside width200px stylebackground-color: rgb(238, 241, 246)el-menu :default-openeds[1, 3]el-submenu index1template slottitlei classel-icon-message/i导航一/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-submenu index1-4template slottitle选项4/templateel-menu-item index1-4-1选项4-1/el-menu-item/el-submenu/el-submenuel-submenu index2template slottitlei classel-icon-menu/i导航二/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index2-1选项1/el-menu-itemel-menu-item index2-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index2-3选项3/el-menu-item/el-menu-item-groupel-submenu index2-4template slottitle选项4/templateel-menu-item index2-4-1选项4-1/el-menu-item/el-submenu/el-submenuel-submenu index3template slottitlei classel-icon-setting/i导航三/templateel-menu-item-grouptemplate slottitle分组一/templateel-menu-item index3-1选项1/el-menu-itemel-menu-item index3-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index3-3选项3/el-menu-item/el-menu-item-groupel-submenu index3-4template slottitle选项4/templateel-menu-item index3-4-1选项4-1/el-menu-item/el-submenu/el-submenu/el-menu/el-aside
将代码删减成为我们所需要的样子。
el-aside width220px stylebackground-color: rgb(238, 241, 246); border: 1px solid #eeeel-menu :default-openeds[1, 3]el-submenu index1template slottitlei classel-icon-message/i系统信息管理/templateel-menu-item-groupel-menu-item index1-1router-link to/dept部门管理/router-link /el-menu-itemel-menu-item index1-2router-link to/emp员工管理/router-link /el-menu-item/el-menu-item-group/el-submenu/el-menu/el-aside
header和aside设计好后下面主要设计main部分。
2.页面组件实现
在main区域中首先分为以下几个部分
最上面是表单中间是表格下面是分页栏。 因此需要这三部分的组件来实现。
首先是表单表单采用的是行内表单。 el-form :inlinetrue :modelsearchEmp classdemo-form-inlineel-form-item label姓名el-input v-modelsearchEmp.name placeholder请输入员工姓名/el-input/el-form-itemel-form-item label性别el-select v-modelsearchEmp.gender placeholder请选择el-option label男 value1/el-optionel-option label女 value2/el-option/el-select/el-form-itemel-form-item label入职时间!-- 日期选择器 --el-date-picker v-modelsearchEmp.entryDate typedaterange range-separator至start-placeholder开始日期 end-placeholder结束日期!-- 绑定在searchEmp对象中的entryDate属性中去entryDate属性是一个数组有开始日期和结束日期 --/el-date-picker/el-form-itemel-form-itemel-button typeprimary clickonSubmit查询/el-button/el-form-item/el-form
在表单中我们通过v-bind绑定了一个数据模型是一个对象模型命名为searchEmp用来记住查询到的对象。所有的表单项都绑定在searchEmp这个对象当中。通过v-model实现searchEmp对象的name属性gender属性和entryDate属性的双向绑定。
通过click绑定一个事件onSubmit当点击查询时会将数据提交触发onSubmit方法。
methods: {onsubmit:function() {alert(开始查询数据~)},handleSizeChange:function(val) {alert(当前页面条数为: val)},handleCurrentChange:function(val) {alert(当前页为 val)}}
对象searchEmp要在vue对象中定义其中的entryDate属性要定义一个日期选择器包含开始日期和结束日期。entryDate属性是一个数组。 data () {return {searchEmp: {name:,gender:,entryDate:[]},tableData:[]}}
接着是表格
!-- 表格 --el-table :datatableData :bordertrue !-- tableData数据模型是一个数组需要在Vue对象的数据模型中定义 --el-table-column propname label姓名 width120/el-table-columnel-table-column label图像 width140!-- 图像要指定一个scope插槽 --template slot-scopescopeimg :srcscope.row.image width50px !-- 这个插槽展示图片为src属性通过v-bind动态绑定一个值即当前列中的每一行的image属性 --/template/el-table-columnel-table-column label性别 width140!-- 性别要指定一个scope插槽通过scope插槽可以获取到 row, column, $index 和 storetable 内部的状态管理的数据 --template slot-scopescope{{ scope.row.gender1?男:女 }} !-- 获取当前列中每一行的gender属性并判断是否1是为男不是为女 --/template/el-table-columnel-table-column propjob label职位 width140/el-table-columnel-table-column propentrydate label入职日期 width200/el-table-columnel-table-column propupdatedate label最后操作时间 width200/el-table-columnel-table-column label操作 width200el-button typeprimary sizemini编辑/el-buttonel-button typedanger sizemini删除/el-button/el-table-column !-- prop要与JSON数据中的属性名保持一致 --/el-table
表格中通过v-bind绑定了一个属性tableData该属性用于存储表格中的数据。表格中的数据仍是以数组形式进行存储的因此在数据模型中进行声明。见上面代码
在表格的图像和性别区会展示出value值而并非内容。为了解决这一问题需要使用到插槽。
el-table-column label图像 width140!-- 图像要指定一个scope插槽 --template slot-scopescopeimg :srcscope.row.image width50px !-- 这个插槽展示图片为src属性通过v-bind动态绑定一个值即当前列中的每一行的image属性 --/template/el-table-columnel-table-column label性别 width140!-- 性别要指定一个scope插槽通过scope插槽可以获取到 row, column, $index 和 storetable 内部的状态管理的数据 --template slot-scopescope{{ scope.row.gender1?男:女 }} !-- 获取当前列中每一行的gender属性并判断是否1是为男不是为女 --/template/el-table-column
在图像中动态绑定src属性使得图像这一列的每一行数据中的image属性动态绑定给src。
在性别中对这一列的每一行数据中的gender属性做判断如果1则性别为男否则为女使用三元运算符。
scope.row.image
scope.row.gender
3.分页组件实现
el-pagination background layoutsizes, prev, pager, next, jumpersize-changehandleSizeChange current-changehandleCurrentChange :total1000!-- :total1000, 写全 v-bind:total1000, :语法是 v-bind: 的简写用于绑定一个动态的值到属性 --!-- size-change pageSize 改变时会触发 回调参数每页条数 --!-- current-change currentPage 改变时会触发 回调参数当前页 --!-- :v-on的简写 v-on为el-button标签绑定了一个事件click--/el-pagination
分页组件中有两个方法详见Element-03.组件-Pagination分页-CSDN博客。同时所定义的方法要在vue对象中加以声明。
methods: {onsubmit:function() {alert(开始查询数据~)},handleSizeChange:function(val) {alert(当前页面条数为: val)},handleCurrentChange:function(val) {alert(当前页为 val)}} 三.axios异步加载数据 使用axios异步加载数据达到在页面中能够动态展示的效果。在mounted方法中当模型挂载完毕后通过get方法拿到数据并将其中的data数组赋值给vue对象的tableData数组。
mounted () {axios.get(https://yapi.pro/mock/401965/user/getById).then((result) {this.tableDataresult.data.data });}
在script标签中引入axios
script
import axios from axios;
相关具体原理参考Ajax-03.Axios-案例-CSDN博客
这样整个案例便制作完成。
