Element-06.案例

一.目标

实现下面这个页面，表格中的数据使用axois异步加载数据

二.实现步骤 

首先在vue项目的views文件夹中新建一个tlias文件夹，用来存储该案例的相关组件。员工页面组件（EmpView.vue）和部门页面组件（DeptView.vue）分别在tlias文件夹中创建好。

在App.vue中的<template>标签中引入<emp-view>标签，并在<script>标签中导入EmpView.vue组件。 components中加入EmpView组件。

<!-- 模板部分，由他生成HTML代码  相当于vue当中的视图部分 -->
<template><div>   <!-- 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.vue'export default {components: { EmpView },   // components里面也不能有<template>中未定义的标签的vue组件data () {return {/* message:"Hello Vue"     */}},methods: {}}
</script><!-- 定义CSS样式 -->
<style></style>

1.页面基本布局

        首先页面呈现出顶栏，左边栏，然后主区域的整体布局，因此要实现这种布局。我们在element组件中找到这一布局。

 然后找到对应的代码复制到员工页面组件的<template>标签中。

<el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-main>Main</el-main></el-container>
</el-container>

浏览器页面结构如下： 

 

在实现了基本布局后，发现这三部分并没有边框线，因此要在这三部分中加上边框线。

 第一行代码改下：

<el-container style="height: 800px; border: 1px solid #eee">

下面在<el-header>标签中设置要展示的标题。

<el-header style="font-size: 40px; background-color: #6495ED;">tlias智能学习辅助系统</el-header>

header部分设计好后，接下来在<el-aside>标签中设置我们需要的样式 。首先在element组件库中寻找符合我们要求的样式。

<el-aside width="200px" style="background-color: rgb(238, 241, 246)"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>导航一</template><el-menu-item-group><template slot="title">分组一</template><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-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>导航二</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i>导航三</template><el-menu-item-group><template slot="title">分组一</template><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-menu-item-group title="分组2"><el-menu-item index="3-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="3-4"><template slot="title">选项4</template><el-menu-item index="3-4-1">选项4-1</el-menu-item></el-submenu></el-submenu></el-menu></el-aside>

将代码删减成为我们所需要的样子。

<el-aside width="220px" style="background-color: rgb(238, 241, 246); border: 1px solid #eee"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系统信息管理</template><el-menu-item-group><el-menu-item index="1-1"><router-link to="/dept">部门管理</router-link>    </el-menu-item><el-menu-item index="1-2"><router-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 :inline="true" :model="searchEmp" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="searchEmp.name" placeholder="请输入员工姓名"></el-input></el-form-item><el-form-item label="性别"><el-select v-model="searchEmp.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="searchEmp.entryDate" type="daterange" range-separator="至"start-placeholder="开始日期" end-placeholder="结束日期"><!-- 绑定在searchEmp对象中的entryDate属性中去，entryDate属性是一个数组，有开始日期和结束日期 --></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</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 :data="tableData" :border="true"> <!-- tableData数据模型是一个数组，需要在Vue对象的数据模型中定义 --><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column label="图像" width="140"><!-- 图像要指定一个scope插槽 --><template slot-scope="scope"><img :src="scope.row.image" width="50px">   <!-- 这个插槽展示图片，为src属性通过v-bind动态绑定一个值，即当前列中的每一行的image属性 --></template></el-table-column><el-table-column label="性别" width="140"><!-- 性别要指定一个scope插槽，通过scope插槽可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据 --><template slot-scope="scope">{{ scope.row.gender==1?'男':'女' }}    <!-- 获取当前列中每一行的gender属性并判断是否==1，是为男，不是为女 --></template></el-table-column><el-table-column prop="job" label="职位" width="140"></el-table-column><el-table-column prop="entrydate" label="入职日期" width="200"></el-table-column><el-table-column prop="updatedate" label="最后操作时间" width="200"></el-table-column><el-table-column label="操作" width="200"><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column>    <!-- prop要与JSON数据中的属性名保持一致 --></el-table>

表格中通过v-bind绑定了一个属性tableData，该属性用于存储表格中的数据。表格中的数据仍是以数组形式进行存储的，因此在数据模型中进行声明。（见上面代码）

在表格的图像和性别区，会展示出value值而并非内容。为了解决这一问题，需要使用到插槽。

<el-table-column label="图像" width="140"><!-- 图像要指定一个scope插槽 --><template slot-scope="scope"><img :src="scope.row.image" width="50px">   <!-- 这个插槽展示图片，为src属性通过v-bind动态绑定一个值，即当前列中的每一行的image属性 --></template></el-table-column><el-table-column label="性别" width="140"><!-- 性别要指定一个scope插槽，通过scope插槽可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据 --><template slot-scope="scope">{{ scope.row.gender==1?'男':'女' }}    <!-- 获取当前列中每一行的gender属性并判断是否==1，是为男，不是为女 --></template></el-table-column>

在图像中动态绑定src属性，使得图像这一列的每一行数据中的image属性动态绑定给src。

在性别中对这一列的每一行数据中的gender属性做判断，如果==1则性别为男，否则为女，使用三元运算符。

scope.row.image
scope.row.gender

3.分页组件实现

<el-pagination background layout="sizes, prev, pager, next, jumper"@size-change="handleSizeChange" @current-change="handleCurrentChange" :total="1000"><!-- :total="1000", 写全 v-bind:total="1000", ":"语法是 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.tableData=result.data.data });}

在<script>标签中引入axios 

<script>
import axios from 'axios';

相关具体原理参考Ajax-03.Axios-案例-CSDN博客

这样整个案例便制作完成。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/403592.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C语言指针详解-上

C语言指针详解-上

C语言指针详解-上 前言1.指针的基本概念1.1指针是什么1.2指针的声明与初始化1.3取地址符&和解引用符*& 运算符用于**获取变量的地址*** 运算符用于访问指针指向的值 2.指针的类型常见数据类型的指针指针与数组、字符串数组指针结构体指针函数指针二级指针void指针 3.指…
阅读更多...
【数据结构】二叉树（二）遍历

【数据结构】二叉树（二）遍历

上篇已经了解对二叉树有了大概了解&#xff0c;本篇学习二叉树的前序、中序、后序及层序遍历的递归与非递归共7种遍历方法&#xff0c;快收藏吧~ 目录 1、前序遍历 递归方式&#xff1a; 迭代方式&#xff1a; 2、中序遍历 递归方式&#xff1a; 迭代方式&#xff1a; …
阅读更多...
XXX【4】策略模式

XXX【4】策略模式

如上图所示&#xff0c;如果要加入一个新的货币&#xff0c;那么就需要对类中的Calculate函数进行修改&#xff0c;这违背了封闭开放原则。 上图中的方式更加合适&#xff0c;搞一个抽象类&#xff08;方法中可以用多态调用&#xff09;&#xff0c;然后每个货币自己是一个类&a…
阅读更多...
每日学习笔记：C++ STL之堆栈容器stack

每日学习笔记：C++ STL之堆栈容器stack

目录 stack定义 核心接口 stack class声明 stack class定义 用户自定义的Stack Class C11特色的插入元素的新形式 运用实例 stack定义 核心接口 stack class声明 stack class定义 用户自定义的Stack Class C11特色的插入元素的新形式 运用实例
阅读更多...
数据结构（邓俊辉）学习笔记】优先级队列 07——堆排序

数据结构（邓俊辉）学习笔记】优先级队列 07——堆排序

1.算法 作为完全二叉堆的一个应用&#xff0c;这节来介绍堆排序算法。 是的&#xff0c;谈到优先级队列&#xff0c;我们很自然地就会联想到排序。因为就其功能而言&#xff0c;包括完全二叉堆在内的任何一种优先级队列都天生地具有选取功能&#xff0c;也就是选取其中的最大…
阅读更多...
【mkdir rmdir】Centos/Linux mkdir rmdir命令详细介绍

【mkdir rmdir】Centos/Linux mkdir rmdir命令详细介绍

【mkdir & rmdir】Centos/Linux mkdir & rmdir命令详细介绍 简介 mkdir rmdir 简介 mkdir 命令和 rmdir 命令是在 linux 当中比较常用的两个命令&#xff0c;这两个命令前者是创建空目录&#xff0c;后者是删除空目录。rmdir 命令的定位比较尴尬它的功能可以被 rm 命…
阅读更多...
“论面向服务架构设计及其应用”写作框架，软考高级，系统架构设计师

“论面向服务架构设计及其应用”写作框架，软考高级，系统架构设计师

论文真题 面向服务架构&#xff08;Service-Oriented Architecture, SOA&#xff09; 是一种应用框架&#xff0c;将日常的业务应用划分为单独的业务功能服务和流程&#xff0c;通过采用良好定义的接口和标准协议将这些服务关联起来。通过实施基于SOA的系统架构&#xff0c;用…
阅读更多...
版本更新 《坚持学习计时器》软件V3.1 更新内容:自动实时显出

版本更新 《坚持学习计时器》软件V3.1 更新内容:自动实时显出

&#x1f31f; 嗨&#xff0c;我是命运之光&#xff01; &#x1f30d; 2024&#xff0c;每日百字&#xff0c;记录时光&#xff0c;感谢有你一路同行。 &#x1f680; 携手启航&#xff0c;探索未知&#xff0c;激发潜能&#xff0c;每一步都意义非凡。 版本更新 《坚持学习…
阅读更多...
海量数据处理商用短链接生成器平台 - 1

海量数据处理商用短链接生成器平台 - 1

第一章 海量数据处理商用短链接生成器平台介绍 第1集 什么是短链接生成器 短链接生成器是一种工具&#xff0c;可以将较长的链接转换成较短的链接。这种工具在许多场景中都很有用&#xff0c;包括营销、社交媒体分享和数据报告等。以下是一些关于短链接生成器的优点和作用&…
阅读更多...
ubuntu20.04挂载机械硬盘

ubuntu20.04挂载机械硬盘

环境说明 1.基于清华源地址下载的ubuntu20.04制作的系统盘&#xff0c;然后安装在PC上&#xff08;固态硬盘&#xff09; 2.机械硬盘无法看见 目的 挂载机械硬盘&#xff0c;开机就能自动启动/挂载 参考链接 https://blog.csdn.net/qq_35624642/article/details/137713143…
阅读更多...
Socket编程TCP 基础

Socket编程TCP 基础

一.什么是Socket(套接字&#xff09; 定义&#xff1a;就是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象。一个套接字就是网络上进程通信的一端&#xff0c;提供了应用层进程利用网络协议交换数据的机制。从所处的地位来讲&#xff0c;套接字上联应用进程&#x…
阅读更多...
C:每日一练：单身狗（2.0版本）

C:每日一练：单身狗（2.0版本）

前言&#xff1a; 今天在刷题的时候突然看到一道题&#xff0c;疑似一位故题。仔细一看&#xff0c;欸&#xff01;这不是就是单身狗的升级版吗&#xff1f;我想那必须再安排一篇&#xff0c;不过由于本篇文章与上一篇单身狗文章所涉及的知识点基本相同&#xff0c;所以还请大…
阅读更多...
政企单位如何选择适合规模的即时通讯软件？

政企单位如何选择适合规模的即时通讯软件？

政企单位在不同规模的组织结构中都面临着沟通和协作的挑战。为了提高工作效率和团队协作能力&#xff0c;选择适合规模的即时通讯软件至关重要。本文将为政企单位在选择适合规模的即时通讯软件时提供一些关键要素和指导&#xff0c;同时重点介绍WorkPlus作为一个可以迎合政企单…
阅读更多...
谷歌的高级指令有哪些

谷歌的高级指令有哪些

今天会分享一些组合用法&#xff0c;这样就能节省许多时间可以放在跟进客户上面&#xff08;本文只介绍谷歌的搜索指令&#xff0c;并无推广&#xff09; part one 谷歌常用的搜索引擎指令&#xff1a; 1、Inurl&#xff0c;在网址中 2、Intext&#xff0c;在网页内容中 3、…
阅读更多...
tcpdump入门——抓取三次握手数据包

tcpdump入门——抓取三次握手数据包

1. 使用docker启动一个tcp应用 参考&#xff1a;https://blog.csdn.net/LONG_Yi_1994/article/details/141175526 2. 获取容器id docker ps |grep gochat 3. 获取容器的 PID 首先&#xff0c;你需要获得容器的进程 ID&#xff08;PID&#xff09;。可以使用 docker inspect…
阅读更多...
遥感之常用各种指数总结大全

遥感之常用各种指数总结大全

目前在遥感领域基本各种研究领域都会用到各种各样的指数&#xff0c;如水体指数&#xff0c;植被指数&#xff0c;农业长势指数&#xff0c;盐分指数&#xff0c;云指数&#xff0c;阴影指数&#xff0c;建筑物指数&#xff0c;水质指数&#xff0c;干旱指数等等众多。 本文对上…
阅读更多...
【Web】巅峰极客2024 部分题解

【Web】巅峰极客2024 部分题解

目录 EncirclingGame GoldenHornKing php_online admin_Test EncirclingGame 玩赢游戏就行 GoldenHornKing 利用点在传入的app 可以打python内存马 /calc?calc_reqconfig.__init__.__globals__[__builtins__][exec](app.add_api_route("/flag",lambda:__i…
阅读更多...
STM32通过I2C硬件读写MPU6050

STM32通过I2C硬件读写MPU6050

目录 STM32通过I2C硬件读写MPU6050 1. STM32的I2C外设简介 2. STM32的I2C基本框图 3. STIM32硬件I2C主机发送流程 10位地址与7位地址的区别 7位主机发送的时序流程 7位主机接收的时序流程 4. STM32硬件与软件的波形对比 5. STM32配置硬件I2C外设流程 6. STM32的I2C.h…
阅读更多...
Java Web|day6.MyBatis-Plus

Java Web|day6.MyBatis-Plus

MyBatisPlus 定义 mybatis-plus是一款Mybatis增强工具&#xff0c;用于简化开发&#xff0c;提高效率。 核心功能 注解 TableName 注解在类上&#xff0c;指定类和数据库表的映射关系。实体类的类名&#xff08;转成小写后&#xff09;和数据库表名相同时&#xff0c;可以不…
阅读更多...
网络协议九 应用层 HTTPS

网络协议九 应用层 HTTPS

一 什么是 HTTPS 前面我们看到HTTP 有很多安全问题&#xff0c;因此引出了 对称加密 和 不对称加密。 那么这个对称加密和不对称加密&#xff0c;我们怎么和HTTP结合起来呢&#xff1f;HTTPS 就是弄好的 HTTP 和 加密结合的协议。 通过HTTP加密后的数据&#xff0c;整个传输过…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发