Vue开发实例(十一)用户列表的实现与操作

用户列表的实现与操作

  • 一、创建用户页面和路由
  • 二、表格优化
    • 1、表头自定义
    • 2、表格滚动
    • 3、加入数据索引
    • 4、利用插槽自定义显示
  • 三、功能
    • 1、查询功能
    • 3、增加
    • 4、删除
    • 5、修改

一、创建用户页面和路由

  1. 创建用户页面

src/components/Main 下创建文件夹user,创建文件UserList.vue,文件内容如下:

页面中数据的请求代码:

  • 定义方法getUserData,使用axios 去请求数据,并将请求的数据设置给userData。
  • 在created钩子函数中调用getUserData方法。
<template><el-table:data="userData"style="width: 100%"border:default-sort="{ prop: 'date', order: 'descending' }"><el-table-column prop="date" label="日期" sortable width="180"></el-table-column><el-table-column prop="name" label="姓名" sortable width="180"></el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table>
</template><script>
export default {name: "UserList",data() {return {userData: [],};},methods: {getUserData() {this.$axios.post("/post/userList").then((res) => {this.userData = res.data.userData;});},},created() {this.getUserData();},
};
</script><style scoped>
.el-table {width: 100%;height: auto;
}
</style>
  1. 在之前使用的mockjs中,将菜单数据进行修改,然后加入用户管理的数据
Mock.mock('/post/menuList', 'get', function () {const menu_data = [{name: '用户管理',icon: 'el-icon-user',path: '/index/userList',component: 'user/UserList'},{name: '一级菜单1',icon: 'el-icon-location',path: '/index/menu1',component: 'Main1'},{name: '一级菜单2',icon: 'el-icon-document',path: '/index/menu2',component: 'Main2'}]return {menu_data}
});Mock.mock('/post/userList', 'post', function () {const userData = [{date: "2022-05-02",name: "牛3号",address: "北京市XXXXXX路1号",},{date: "2022-05-04",name: "牛4号",address: "北京市XXXXXX路2号",},{date: "2022-05-01",name: "牛5号",address: "北京市XXXXXX路3号",},]return {userData}
});

页面效果
在这里插入图片描述

二、表格优化

1、表头自定义

  1. el-table 增加属性 header-row-class-name 值为 table_header_class
  2. 设置样式,注意使用:/deep/ .table-header-class th

参考代码:

<template><el-table:data="userData"style="width: 100%"border:default-sort="{ prop: 'date', order: 'descending' }"header-row-class-name="table-header-class"><el-table-column prop="date" label="日期" sortable width="180"></el-table-column><el-table-column prop="name" label="姓名" sortable width="180"></el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table>
</template><script>
export default {name: "UserList",data() {return {userData: [],};},methods: {getUserData() {this.$axios.post("/post/userList").then((res) => {this.userData = res.data.userData;});},},created() {this.getUserData();},
};
</script><style scoped>.el-table {width: 100%;height: auto;
}/deep/ .table-header-class th{background-color: #91a8b1 !important;color: white;
}
</style>

页面效果
在这里插入图片描述

2、表格滚动

如果数据过多则需要加入表格滚动,否则是外部滚动很难看,这种情况处理起来比较简单,在el-table加入max-height属性即可,比如我设置值为500px
在这里插入图片描述

效果展示
在这里插入图片描述

3、加入数据索引

加入数据索引
给表格加上一列即可,设置 type=“index”

<el-table-column type="index" width="50"></el-table-column>

在这里插入图片描述

4、利用插槽自定义显示

让数据看起来更显眼、分类更明确,比如 userData 加了tag,表示地址是工作地址,还是家

<el-table-column prop="tag" label="标签"></el-table-column>

页面效果
在这里插入图片描述
只加个标签的话,很平淡,我们用插槽试一下

<el-table-column prop="tag" label="标签"><template slot-scope="scope"><el-tag:type="scope.row.tag === '家' ? 'primary' : 'success'"disable-transitions>{{ scope.row.tag }}</el-tag></template></el-table-column>

页面效果
在这里插入图片描述

三、功能

1、查询功能

  1. 页面添加搜索框和搜索按钮,在table的前面加入代码
  2. 在data里面定义search_name,对应el-input的v-model

userList代码

<template><div id="button_div"><el-inputid="search-input"size="small"label-width="100px"prefix-icon="el-icon-search"placeholder="请输入名字..."v-model="search_name"style="height: auto; width: 20%"></el-input>&nbsp;<el-buttontype="primary"size="small"class="search-button"@click="search"style="height: auto">搜索</el-button><el-table:data="userData"style="width: 100%"border:default-sort="{ prop: 'date', order: 'descending' }"header-row-class-name="table-header-class"class="custom-table-height"max-height="500px"><el-table-column type="index" width="50"> </el-table-column><el-table-column prop="date" label="日期" sortable width="180"></el-table-column><el-table-column prop="name" label="姓名" sortable width="180"></el-table-column><el-table-column prop="address" label="地址"> </el-table-column><el-table-column prop="tag" label="标签"><template slot-scope="scope"><el-tag:type="scope.row.tag === '家' ? 'primary' : 'success'"disable-transitions>{{ scope.row.tag }}</el-tag></template></el-table-column></el-table></div>
</template><script>
export default {name: "UserList",data() {return {userData: [],search_name: "",};},methods: {getUserData() {this.$axios.post("/post/userList").then((res) => {this.userData = res.data.userData;});},search() {console.log('this.search_name',this.search_name)this.$axios.post("/post/searchUser", { name: this.search_name }).then((res) => {console.log('name===',name)this.userData = res.data.userData;});},},created() {this.getUserData();},
};
</script><style scoped>
/* .el-table {width: 100%;height: 300px !important;
} *//deep/ .table-header-class th {background-color: #91a8b1 !important;color: white;
}
.custom-table-height {height: auto !important; /* 或指定一个固定高度,例如 400px */
}
</style>

mockjs代码

const userData = [{date: "2022-05-02",name: "牛3号",address: "北京市XXXXXX路1号",tag: '家'},{date: "2022-05-04",name: "牛4号",address: "北京市XXXXXX路2号",tag: '家'},{date: "2022-05-01",name: "牛5号",address: "北京市XXXXXX路3号",tag: '家'},
]
Mock.mock('/post/searchUser', 'post', function (param) {console.log('param',param.body);let body = JSON.parse(param.body);let name = body.name;let newData = []if (name) {newData = userData.filter((item) => {console.log('*******',item.name.indexOf(name))return item.name.indexOf(name) > -1;})console.log('eeee',newData)} else {newData = userData;console.log('eeee2',newData)}return {userData: newData}
});

测试如下
在这里插入图片描述

3、增加

4、删除

5、修改


休息一会,继续补充~

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

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

相关文章

从零开始搭建web组态

成果展示&#xff1a;by组态[web组态插件] 一、技术选择 目前只有两种选择&#xff0c;canvas和svg Canvas: 是一个基于像素的渲染引擎&#xff0c;使用JavaScript API在画布上绘制图像&#xff0c;它的优点包括&#xff1a; Canvas渲染速度快&#xff0c;适合处理大量图像和…

数据结构从入门到精通——链表

链表 前言一、链表1.1 链表的概念及结构1.2 链表的分类1.3 链表的实现1.4 链表面试题1.5 双向链表的实现 二、顺序表和链表的区别三、单项链表实现具体代码text.htext.cmain.c单链表的打印空间的开辟链表的头插、尾插链表的头删、尾删链表中元素的查找链表在指定位置之前、之后…

公网IP怎么获取?

公网IP是网络中设备的唯一标识符&#xff0c;用于在Internet上进行通信和定位。对于普通用户来说&#xff0c;了解如何获取自己的公网IP是很有必要的&#xff0c;本文将介绍几种获取公网IP的方法。 方法一&#xff1a;通过路由器查询 大多数家庭和办公室使用的路由器都会有一个…

php httpfs链接hdfs

一.代码&#xff08;有bug&#xff09; GitHub - michaelbutler/php-WebHDFS: A PHP client for WebHDFS 二.调用代码 1.代码1.代码 require_once(../webhdfs/src/org/apache/hadoop/WebHDFS.php);require_once(../webhdfs/src/org/apache/hadoop/tools/Curl.php); require_o…

Machine Vision Technology:Lecture2 Linear filtering

Machine Vision Technology&#xff1a;Lecture2 Linear filtering Types of ImagesImage denoising图像去噪Defining convolution卷积的定义Key properties卷积的关键属性卷积的其它属性Annoying details卷积练习Sharpening锐化Gaussian KernelNoise噪声 分类Gaussian noise高…

一篇了解电阻的使用

目录 一、电阻理论基础 1.电阻的定义 2.欧姆定律 3.电阻决定式 4.电阻的串并联​编辑 5.电阻的功率 6.温度对电阻的影响 二、电阻的选型 1.安装方式 2.电阻值 &#xff08;1&#xff09;电阻值的标称 &#xff08;2&#xff09;电阻值的确定 &#xff08;3&#x…

如何在Linux使用Docker部署Redis并结合内网穿透实现公网远程连接本地数据库

文章目录 前言1. 安装Docker步骤2. 使用docker拉取redis镜像3. 启动redis容器4. 本地连接测试4.1 安装redis图形化界面工具4.2 使用RDM连接测试 5. 公网远程访问本地redis5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定TCP地址远程访问 正文开始前给大家推荐个网站…

游戏引擎分层简介

游戏引擎分层架构&#xff08;自上而下&#xff09; 工具层&#xff08;Tool Layer&#xff09; 在一个现代游戏引擎中&#xff0c;我们最先看到的可能不是复杂的代码&#xff0c;而是各种各样的编辑器&#xff0c;利用这些编辑器&#xff0c;我们可以制作设计关卡、角色、动画…

远程调用--webClient

远程调用webClient 前言1、创建webClient2、准备数据3、执行请求4、接收返回响应到的数据整体代码 前言 非阻塞、响应式HTTP客户端 1、创建webClient WebClient client WebClient.create();2、准备数据 Map<String,String> params new HashMap<>();params.pu…

Tabby-全网最详细讲解

1.Tabby简介 Tabby是一个无限可定制的跨平台终端应用程序&#xff0c;适用于local shells、serial、SSH和Telnet的连接。 Tabby是基于TypeScript开发的终端模拟器&#xff0c;可用于Linux、Windows和Mac OS系统。 Tabby (前身是 Terminus) 是一个可高度配置的终端模拟器和 SSH …

攻防世界-get_post

题目信息 相关知识 -G&#xff1a;表示GET请求&#xff0c;缺省POST -d参数用于发送 POST 请求的数据体 使用-d参数以后&#xff0c;HTTP 请求会自动加上标头Content-Type : application/x-www-form-urlencoded。并且会自动将请求转为 POST 方法&#xff0c;因此可以省略-X PO…

智能驾驶规划控制理论学习04-基于车辆运动学的规划方法

目录 一、线性二自由度汽车模型&#xff08;自行车模型&#xff09; 1、二自由度模型概述 2、不同参考点下的状态空间方程 3、前向仿真 二、运动基元生成方法 1、杜宾斯曲线&#xff08;Dubins Curve&#xff09; 2、Reeds Shepp Curve 三、多项式曲线&#xff08;Poly…

如何本地创建websocket服务端并发布到公网实现远程访问

文章目录 1. Java 服务端demo环境2. 在pom文件引入第三包封装的netty框架maven坐标3. 创建服务端,以接口模式调用,方便外部调用4. 启动服务,出现以下信息表示启动成功,暴露端口默认99995. 创建隧道映射内网端口6. 查看状态->在线隧道,复制所创建隧道的公网地址加端口号7. 以…

微服务监控SpringBoot Actuator模块

Spring Boot Actuator Spring Boot 包含许多附加功能&#xff0c;可帮助您在将应用程序投入生产时监控和管理应用程序。您可以选择使用 HTTP 端点或 JMX 来管理和监控您的应用程序。审核、运行状况和指标收集也可以自动应用于您的应用程序。 简介 Spring Boot Actuator模块提…

参数引入和全局变量引入实现-目标和

LCR 102. 目标和 - 力扣&#xff08;LeetCode&#xff09; 分析题意&#xff0c;画出决策树&#xff0c;其他的思路都跟前面讲过的类似&#xff1a; 全局变量引入实现&#xff1a; 全局变量的引入&#xff0c;需要手动处理回溯&#xff1b; class Solution {int ret; //…

智慧公厕:打造智慧城市的环卫明珠

在城市建设中&#xff0c;公共卫生设施的完善和智能化一直是重要环节。而智慧公厕作为智慧城市建设的重要组成部分&#xff0c;发挥着不可替代的作用。本文以智慧公厕源头实力厂家广州中期科技有限公司&#xff0c;大量精品案例现场实景实图&#xff0c;解读智慧公厕如何助力打…

SwiftUI 在 App 中弹出全局消息横幅(下)

功能需求 在 SwiftUI 开发的 App 界面中,有时我们需要在全局层面向用户展示一些消息: 如上图所示:我们弹出的全局消息横幅位于所有视图之上,这意味这它不会被任何东西所遮挡;而且用户可以点击该横幅关闭它。这是怎么做到的呢? 在本篇博文中,您将学到以下内容 功能需求…

自测-5 Shuffling Machine(python版本)

文章预览&#xff1a; 题目翻译算法python代码oj反馈结果 题目 翻译 shuffle是用于随机化一副扑克牌的过程。由于标准的洗牌技术被认为是薄弱的&#xff0c;并且为了避免员工通过不适当的洗牌与赌徒合作的“内部工作”&#xff0c;许多赌场使用了自动洗牌机。你的任务是模拟一…

探索Linux世界:初次接触和基本指令(文件操作)

文章目录 1.基本介绍和准备2.基本指令和Linux的基本操作3.几个重要基本指令3.1 ls - 列出文件和目录3.1.1文件的知识3.1.2 .和..文件 3.2pwd - 显示当前工作目录3.2.1路径知识 3.3 cd - 切换目录3.4 touch - 创建文件或更新时间戳3.5mkdir - 创建新目录3.6rm - 删除文件或目录3…

[技巧]Arcgis之图斑四至范围批量计算

ArcGIS图层&#xff08;点、线、面三类图形&#xff09;四至范围计算 例外一篇介绍&#xff1a;[技巧]Arcgis之图斑四至点批量计算 说明&#xff1a;如下图画出来的框&#xff08;范围标记不是很准&#xff09; &#xff0c;图斑的x最大和x最小&#xff0c;y最大&#xff0c;…