uni-app:实现列表单选功能

效果图：

核心解析：

一、

<view class="item_all" v-for="(item, index) in info" :key="index"><view class='position parameter-info text-over' :class='item.checked?"checked_parameter":""':data-id="item.employee_num" @tap='selectcustomer'><view class="vv_1">{{item.num_name}}</view></view>
</view>

v-for="(item, index) in info"：将数据进行循环展示

:class='item.checked?"checked_parameter":"" ':表示如果当前行的item.checked为真吗，如果为真执行class="checked_parameter"，如果不为真，就执行class="",也就是判断该行数据是否被选中，选中进行颜色更改

:data-id="item.employee_num"：是在uni-app中使用 v-bind 指令将 data-id 属性绑定到 item.employee_num 这个表达式的值。data-id 是一个自定义属性，可以用于存储某个元素的额外数据。也就是绑定一个值，方便在js中引用

@tap='selectcustomer'：点击事件

 二、

info: [{employee_num: 1001,employee_name: '张三',checked: false,num_name: '1001-张三'},{employee_num: 1002,employee_name: '李四',checked: false,num_name: '1002-李四'}, {employee_num: 1003,employee_name: '王五',checked: false,num_name: '1003-王五'}, {employee_num: 1004,employee_name: '赵六',checked: false,num_name: '1004-赵六'}],
parameterList: ''

在data中定义数据

info（也可以设置为空数组，请求服务器端的数据）

parameterList：定义一个字符串，用于存放被选中数据的行信息

三、

// 参数点击响应事件
selectcustomer: function(e) {var this_checked = e.currentTarget.dataset.id //获取对应的条目idvar parameterList = this.info //获取Json数组console.log(this_checked)for (var i = 0; i < parameterList.length; i++) {if (parameterList[i].employee_num == this_checked) {parameterList[i].checked = true; //当前点击的位置为true即选中this.parameterList = parameterList[i]console.log('参数', this.parameterList)} else {parameterList[i].checked = false; //其他的位置为false}}this.info = parameterList;
},

var this_checked=e.currentTarget.dataset.id:获取被选中行的:data-id中的值(employee_num)

var parameterList = this.info ：获取全部数组的值info

for (var i = 0; i < parameterList.length; i++) :对info的数据进行循环

if (parameterList[i].employee_num == this_checked) :判断info中的每个employee_num是否有与被选中的行的employee_num相等的

parameterList[i].checked = true; ：将满足条件的info数组中的这行数据中的checked 值设置为true,也就表示这行数据被选中

this.parameterList = parameterList[i] ：也就是将data中定义的parameterList的值设置为数组info中的这行数据

parameterList[i].checked = false; ：不满足的行，需要将checked的值设置为false

 this.info = parameterList; ：更新完数据之后重新定义info数组的值

全部代码：

<template><view><view class="top"><view class="search"><view class="search_in"><!-- 使用代码请更改图片路径 --><image :src="search"></image><input type="text" placeholder="请输入名称" placeholder-style="color:#CCCCCC" @confirm="search" /></view></view></view><view class="center"><view class="pages_name"><view class="li"></view><view class="li2">员工信息</view></view></view><view class="all"><view class="item_all" v-for="(item, index) in info" :key="index"><view class='position parameter-info text-over' :class='item.checked?"checked_parameter":""':data-id="item.employee_num" @tap='selectcustomer'><view class="vv_1">{{item.num_name}}</view></view></view></view><view class="button_sure" @tap="sure"><view class="sure_text">确认</view></view><!-- 添加按钮 --><image class='img' :src='add' @tap='add'></image></view>
</template><script>export default {data() {return {search: getApp().globalData.icon + 'index/search.png',add: getApp().globalData.icon + 'index/index/add.png',info: [{employee_num: 1001,employee_name: '张三',checked: false,num_name: '1001-张三'},{employee_num: 1002,employee_name: '李四',checked: false,num_name: '1002-李四'}, {employee_num: 1003,employee_name: '王五',checked: false,num_name: '1003-王五'}, {employee_num: 1004,employee_name: '赵六',checked: false,num_name: '1004-赵六'}],parameterList: ''}},methods: {// 参数点击响应事件selectcustomer: function(e) {var this_checked = e.currentTarget.dataset.id //获取对应的条目idvar parameterList = this.info //获取Json数组console.log(this_checked)for (var i = 0; i < parameterList.length; i++) {if (parameterList[i].employee_num == this_checked) {parameterList[i].checked = true; //当前点击的位置为true即选中this.parameterList = parameterList[i]console.log('参数', this.parameterList)} else {parameterList[i].checked = false; //其他的位置为false}}this.info = parameterList;},},// onLoad() {// 	uni.request({// 		url: getApp().globalData.position + 'Produce/select_employee',// 		data: {// 		},// 		header: {// 			"Content-Type": "application/x-www-form-urlencoded"// 		},// 		method: 'POST',// 		dataType: 'json',// 		success: res => {// 			this.info = res.data.all_info// 		},// 		fail(res) {// 			console.log("查询失败") // 		}// 	});// }}
</script><style>/* 背景色 */page {background-color: #F0F4F7;}/* 搜索框 */.search {display: flex;align-items: center;justify-content: center;height: 60px;background-color: #fff;/* border:1px solid black; */margin-bottom: 5%;}.search .search_in {display: flex;align-items: center;justify-content: space-between;padding: 0 20rpx;box-sizing: border-box;height: 70rpx;width: 90%;background-color: #F0F4F7;border-radius: 5px;}.search_in image {height: 45rpx;width: 50rpx;margin-right: 10px;/* border:1px solid black; */}.search input {/* border:1px solid black; */width: 100%;}/* 列表 */.all {margin-bottom: 20%;}.item_all {/* border: 1px solid black; */margin-bottom: 3%;display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;}.position {display: flex;flex-direction: column;justify-content: center;height: 80px;width: 95%;border-radius: 10px;background-color: #fff;box-shadow: 2px 2px 2px gainsboro;}.vv_1 {margin-left: 5%;word-break: break-all;}/* 选中之后的样式设置 */.checked_parameter {background: #74bfe7;color: #fff;}.footer button {width: 100%;}/* 标题信息 */.center {display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;margin-bottom: 3%;}.pages_name {/* border: 1px solid black; */width: 95%;display: flex;align-items: center;}.li {/* border: 1px solid black; */width: 15px;height: 15px;border-radius: 100%;background-color: #74bfe7;}.li2 {/* border: 1px solid black; */font-size: 110%;margin-left: 2%;}/* 悬浮按钮 */.img {float: right;position: fixed;bottom: 10%;right: 2%;width: 100rpx;height: 100rpx;}/* 确认按钮 */.button_sure {bottom: 0px;position: fixed;width: 100%;height: 8%;background: #74bfe7;color: white;font-size: 105%;display: flex;align-items: center;justify-content: center;}
</style>

扩展：给此界面增加了翻页和模糊查询功能

效果：

前端：

<template><view><view class="top"><view class="search"><view class="search_in"><!-- 使用代码请更改图片路径 --><image :src="search"></image><input type="text" placeholder="请输入员工工号" placeholder-style="color:#CCCCCC" @confirm="search_num" /></view></view></view><view class="center"><view class="pages_name"><view class="li"></view><view class="li2">员工信息</view></view></view><view class="all"><view class="item_all" v-for="(item, index) in info" :key="index"><view class='position parameter-info text-over' :class='item.checked?"checked_parameter":""':data-id="item.employee_num" @tap='selectcustomer'><view class="vv_1">{{item.num_name}}</view></view></view><view class="pagination"><view class="page-button" @tap="prevPage">上一页</view><view class="page-info">{{ page }}</view><view class="page-info">/</view><view class="page-info">{{ totalPage }}</view><view class="page-button" @tap="nextPage">下一页</view></view></view><view class="button_sure" @tap="sure"><view class="sure_text">确认</view></view><!-- 添加按钮 --><image class='img' :src='add' @tap='add'></image></view>
</template>
<script>export default {data() {return {search: getApp().globalData.icon + 'index/search.png',add: getApp().globalData.icon + 'index/index/add.png',info: [],parameterList: '',like_employee_num: '', //模糊查询的员工工号page: 1, // 当前页数pageSize: 10, // 每页展示的数据条数totalPage: 0, //总页数}},methods: {// 参数点击响应事件，单选的实现selectcustomer: function(e) {var this_checked = e.currentTarget.dataset.id //获取对应的条目idvar List = this.info //获取Json数组// console.log(this_checked)for (var i = 0; i < List.length; i++) {if (List[i].employee_num == this_checked) {List[i].checked = true; //当前点击的位置为true即选中this.parameterList = List[i]console.log('参数', this.parameterList)} else {List[i].checked = false; //其他的位置为false}}this.info = List;},//确认sure() {if (!this.parameterList) {uni.showToast({title: '请选择员工',icon: 'none'})} else {uni.$emit('isRefresh', this.parameterList)uni.navigateBack({delta: 1})}},//模糊查询search_num(event) {this.page = 1;//模糊查询默认从首页开始this.like_employee_num = event.target.value;this.getdata()},getdata() {uni.request({url: getApp().globalData.position + 'Produce/select_employee',data: {like_employee_num: this.like_employee_num,page: this.page,pageSize: this.pageSize},header: {"Content-Type": "application/x-www-form-urlencoded"},method: 'POST',dataType: 'json',success: res => {this.info = res.data.all_infothis.totalPage = Math.ceil(res.data.total / this.pageSize);},fail(res) {console.log("查询失败")}});},prevPage() {if (this.page > 1) {this.page--;this.getdata();}},nextPage() {if (this.page < this.totalPage) {this.page++;this.getdata();}},},onLoad() {this.getdata();}}
</script><style>.pagination {display: flex;align-items: center;justify-content: left;margin-bottom: 20%;/* border: 1px solid black; */}.page-button {height: 30px;line-height: 30px;padding: 0 10px;border: 1px solid white;border-radius: 5px;margin: 0 5px;cursor: pointer;}.page-info {font-weight: bold;}/* 背景色 */page {background-color: #F0F4F7;}/* 搜索框 */.search {display: flex;align-items: center;justify-content: center;height: 120rpx;background-color: #fff;/* border:1px solid black; */margin-bottom: 5%;}.search .search_in {display: flex;align-items: center;justify-content: space-between;padding: 0 20rpx;box-sizing: border-box;height: 70rpx;width: 90%;background-color: #F0F4F7;border-radius: 10rpx;}.search_in image {height: 45rpx;width: 50rpx;margin-right: 20rpx;/* border:1px solid black; */}.search input {/* border:1px solid black; */width: 100%;}/* 列表 */.all {margin-bottom: 20%;border: 1px solid #F0F4F7;}.item_all {/* border: 1px solid black; */margin-bottom: 3%;display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;}.position {display: flex;flex-direction: column;justify-content: center;height: 160rpx;width: 95%;border-radius: 20rpx;background-color: #fff;box-shadow: 4rpx 4rpx 4rpx gainsboro;}.vv_1 {margin-left: 5%;word-break: break-all;}/* 选中之后的样式设置 */.checked_parameter {background: #74bfe7;color: #fff;}.footer button {width: 100%;}/* 标题信息 */.center {display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;margin-bottom: 3%;}.pages_name {/* border: 1px solid black; */width: 95%;display: flex;align-items: center;}.li {/* border: 1px solid black; */width: 30rpx;height: 30rpx;border-radius: 100%;background-color: #74bfe7;}.li2 {/* border: 1px solid black; */font-size: 110%;margin-left: 2%;}/* 悬浮按钮 */.img {float: right;position: fixed;bottom: 15%;right: 2%;width: 100rpx;height: 100rpx;}/* 确认按钮 */.button_sure {bottom: 0rpx;position: fixed;width: 100%;height: 8%;background: #74bfe7;color: white;font-size: 105%;display: flex;align-items: center;justify-content: center;}
</style>

后端：

  //查询员工详细信息public function select_employee(){$like_employee_num = input('post.like_employee_num','');//模糊查询的条件$page = input('post.page', 1); // 获取当前页数，默认为第一页$pageSize = input('post.pageSize', 10); // 获取每页展示的数据条数，默认为10条$start = ($page - 1) * $pageSize; // 计算查询的起始位置//计算总页数$count = Db::table('hr_employees')->where('employee_num', 'like', '%' . $like_employee_num . '%')->count(); // 查询符合条件的总记录数$data['total'] = $count; // 将总记录数返回给前端//查询数据$data['all_info'] = db::table('hr_employees')->where(['employee_num'=>['like', '%' . $like_employee_num . '%']])->limit($start, $pageSize)->select();//处理拼接数据和单选所需数据for($i=0;$i<count($data['all_info']);$i++){$data['all_info'][$i]['num_name'] =  $data['all_info'][$i]['employee_num'] . '-' . $data['all_info'][$i]['employee_name'];$data['all_info'][$i]['checked'] =  false;}//返回值给前端echo json_encode($data);}

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

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

相关文章

C++、python双语言弹窗教程与对比

C++、python双语言弹窗教程与对比

Messagebox弹窗 MessageBox指的是显示一个模态对话框&#xff0c;其中包含一个系统图标、 一组按钮和一个简短的特定于应用程序消息&#xff0c;如状态或错误的信息。消息框中返回一个整数值&#xff0c;该值指示用户单击了哪个按钮。 例子&#xff1a; 本文介绍了用C、Pytho…
阅读更多...
Java对象创建回收全过程

Java对象创建回收全过程

目录 1 前言 2 Java对象创建 2.1 类加载检查 2.1.1 谁来加载 2.1.2 如何加载 2.2 分配内存 2.3 初始化零值 2.4 设置对象头 2.5 执行clinit 3 对象回收 4 补充Tomcat打破双亲委派机制 在讲java创建之前，我们先来了解下Java虚拟机内存组成，当Java虚拟机启动后，会…
阅读更多...
Android 获取网络连接状态新方法

Android 获取网络连接状态新方法

一. 问题背景 Android12上&#xff0c;有的app模块判断当前网络的类型和连接状态时&#xff0c;还是使用的旧的API&#xff0c;导致返回的结果不准确&#xff0c;影响代码逻辑判断&#xff0c;本篇文章就这一问题&#xff0c;整理一下判断网络类型和连接状态的新方法。 二. 原因…
阅读更多...
JVM基础篇-本地方法栈与堆

JVM基础篇-本地方法栈与堆

JVM基础篇-本地方法栈与堆 本地方法栈 什么是本地方法? 本地方法即那些不是由java层面实现的方法&#xff0c;而是由c/c实现交给java层面进行调用&#xff0c;这些方法在java中使用native关键字标识 public native int hashCode()本地方法栈的作用? 为本地方法提供内存空…
阅读更多...
新手入门吉他买什么好？千元内VEAZEN费森VZ200和恩雅X1pro综合评测，你会选新型材质HPL还是传统木吉他？

新手入门吉他买什么好？千元内VEAZEN费森VZ200和恩雅X1pro综合评测，你会选新型材质HPL还是传统木吉他？

千元内入门吉他少不了VEAZEN费森VZ200单板系列和恩雅X1 PRO系列这两款热门系列&#xff0c;最近很多初学者朋友来私信&#xff0c;咨询这两款琴有什么优缺点&#xff0c;哪一款更值得初学者选购&#xff0c;那么今天&#xff0c;就以它们为本期的评测主角&#xff0c;全方位评测…
阅读更多...
基于ARM+FPGA的驱控一体机器人控制器设计

基于ARM+FPGA的驱控一体机器人控制器设计

目前市场上工业机器人&#xff0c;数控机床等多轴运动控制系统普遍采用运动控制器加 伺服驱动器的分布式控制方式。在这种控制方式中&#xff0c;控制器一方面完成人机交互&#xff0c;另 一方面进行 NC 代码的解释执行&#xff0c;插补运算&#xff0c;继而将计算出来的位…
阅读更多...
vue v-slot指令

vue v-slot指令

目录 定义语法使用场景场景一场景二场景三tips只有一个默认插槽时 定义 在Vue中&#xff0c; v-slot 指令用于定义插槽的模板内容。它用于在父组件中传递内容到子组件中的插槽。 v-slot 指令可以用于 标签或组件标签上&#xff0c;以便在子组件中使用插槽。 语法 使用 v-slo…
阅读更多...
一位年薪50W的测试被开除，回怼的一番话，令人沉思

一位年薪50W的测试被开除，回怼的一番话，令人沉思

一位年薪35W测试工程师被开除回怼道&#xff1a;“反正我有技术&#xff0c;在哪不一样” 一技傍身&#xff0c;万事不愁&#xff0c;当我们掌握了一技之长后&#xff0c;在职场上说话就硬气了许多&#xff0c;不用担心被炒&#xff0c;反过来还可以炒了老板&#xff0c;这一点…
阅读更多...
MVC配置原理

MVC配置原理

如果你想保存springboot的mvc配置并且还想自己添加自己的配置就用这个。 视图解析器原理&#xff0c;它会从IOC容器里获取配置好视图解析器的配置类里的视图解析器集合&#xff0c; 然后遍历集合&#xff0c;生成一个一个的视图对象&#xff0c;放入候选 视图里&#xff0c;…
阅读更多...
MQTT协议详解「概念、特性、版本及作用」

MQTT协议详解「概念、特性、版本及作用」

MQTT&#xff08;Message Queuing Telemetry Transport&#xff0c;消息队列遥测传输&#xff09;是ISO标准下基于发布/订阅方式的轻量级消息协议。MQTT通常使用TCP / IP&#xff08;传输控制协议/Internet协议&#xff09;作为其传输&#xff0c;但也可以使用其他双向传输。MQ…
阅读更多...
海外版金融理财系统源码 国际投资理财系统源码 项目投资理财源码

海外版金融理财系统源码 国际投资理财系统源码 项目投资理财源码

海外版金融理财系统源码 国际投资理财系统源码 项目投资理财源码
阅读更多...
8.3一日总结

8.3一日总结

1.远程仓库的使用 a.克隆远程仓库 1>.在桌面克隆远程仓库 git clone 仓库名 2>.修改仓库内容 3>添加目录 git add. 4>提交: git commit -m 完成登录功能 5>推送提交远程仓库 : git push origin master -u 6>更改推送:git push(简写形式) 需要先添加,再提交,最…
阅读更多...
一文学透设计模式——工厂模式

一文学透设计模式——工厂模式

工厂模式 概念 牛马人生公司最近开启了线上直播&#xff0c;直播中牛马人生公司宣称他们建造了一家世界上最为先进的工厂&#xff0c;任何人只要去到工厂面前&#xff0c;告诉工厂你要什么牌子的汽车&#xff0c;工厂就会给你一辆什么牌子的汽车。 这引起了粉丝朋友的注意&a…
阅读更多...
stm32与上位机电脑间最快的通信方式是什么？

stm32与上位机电脑间最快的通信方式是什么？

对于小型多关节机械臂的控制电路设计&#xff0c;选择合适的通信方式可以提高MCU与上位机之间的实时性。以下是一些在STM32上常用的通信方式&#xff0c;你可以根据你的具体需求选择适合的&#xff1a; 串口通信&#xff08;UART&#xff09;&#xff1a;串口通信是一种常见的…
阅读更多...
opencv-34 图像平滑处理-2D 卷积 cv2.filter2D()

opencv-34 图像平滑处理-2D 卷积 cv2.filter2D()

2D卷积是一种图像处理和计算机视觉中常用的操作&#xff0c;用于在图像上应用滤波器或卷积核&#xff0c;从而对图像进行特征提取、平滑处理或边缘检测等操作。 在2D卷积中&#xff0c;图像和卷积核都是二维的矩阵或数组。卷积操作将卷积核在图像上滑动&#xff0c;对每个局部区…
阅读更多...
Netty学习（四）

Netty学习（四）

文章目录 四. 优化与源码1. 优化1.1 扩展序列化算法jdk序列化与反序列化Serializer & AlgorithmConfigapplication.properties MessageCodecSharableMessage&#xff08;抽象类&#xff09; 测试序列化测试反序列化测试 1.2 参数调优1&#xff09;CONNECT_TIMEOUT_MILLIS2&…
阅读更多...
ansible配置文件案例

ansible配置文件案例

案例一 控制主机上的普通用户控制受控主机 控制端1台&#xff0c;受控端两台 1.将两台受控主机添加到/etc/hosts文件中 127.0.0.1 localhost localhost.localdomain localhost4 localhost4.localdomain4 ::1 localhost localhost.localdomain localhost6 localhos…
阅读更多...
Qt5.13引入QtWebApp的模块后报错： error C2440: “reinterpret_cast”: 无法从“int”转换为“quintptr”

Qt5.13引入QtWebApp的模块后报错： error C2440: “reinterpret_cast”: 无法从“int”转换为“quintptr”

1、开发环境 Win10-64 qt5.13 msvc2015-64bit-release 2、报错 新建一个demo工程。 引入QtWebApp的httpserver、logging、templateengine三个模块后。 直接运行&#xff0c;&#xff0c;此时报错如下&#xff1a; E:\Qt5.13.1\install\5.13.1\msvc2015_64\include\QtCore…
阅读更多...
Java 8 中使用 Stream 遍历树形结构

Java 8 中使用 Stream 遍历树形结构

在实际开发中&#xff0c;我们经常会开发菜单&#xff0c;树形结构&#xff0c;数据库一般就使用父id来表示&#xff0c;为了降低数据库的查询压力&#xff0c;我们可以使用Java8中的Stream流一次性把数据查出来&#xff0c;然后通过流式处理&#xff0c;我们一起来看看&#x…
阅读更多...
GEE：矢量数据去除重复值（输出样本点数据的标签信息）

GEE：矢量数据去除重复值（输出样本点数据的标签信息）

作者：CSDN @ _养乐多_ 本文记录了在GoogleEarthEngine（GEE）平台上，将样本点数据中某个字段的值去除重复值，并将剩下的值打印到控制台的代码。该代码可以用于快速在GEE平台上查询土地利用分类信息中landcover的类别信息。 矢量数据信息如下所示， 打印结果如下所示， 文章…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023