uni-app: realize the single selection function of the list

Mobile 2023-08-18 22:02:02 views: null

Renderings:

Core analysis:

one,

<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" : display the data in a loop

:class='item.checked? "checked_parameter":"" ' : If the item.checked of the current line is true, if it is true, execute class="checked_parameter", if not, execute class="", That is to judge whether the row of data is selected, and select to change the color

:data-id="item.employee_num" : Use the v-bind directive in uni-app to data-idbind the attribute to item.employee_numthe value of this expression. data-idis a custom attribute that can be used to store additional data about an element. That is to bind a value for easy reference in js

@tap='selectcustomer' : click event

 two,

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: ''

Define data in data

info (can also be set to an empty array to request data from the server)

parameterList : Define a string to store the row information of the selected data

three,

// 参数点击响应事件
selectcustomer: function(e) {
    var this_checked = e.currentTarget.dataset.id //获取对应的条目id
	var 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 : Get the value of the selected row: data-id (employee_num)

var parameterList = this.info : Get the value info of all arrays

for (var i = 0; i < parameterList.length; i++) : loop through info data

if (parameterList[i].employee_num == this_checked) : Determine whether each employee_num in info is equal to the employee_num of the selected row

parameterList[i].checked = true; : Set the checked value of this line of data in the info array that meets the conditions to true, which means that this line of data is selected

this.parameterList = parameterList[i] : That is, set the value of the parameterList defined in data to this line of data in the array info

parameterList[i].checked = false; : Unsatisfactory rows, you need to set the value of checked to false

 this.info = parameterList; : Redefine the value of the info array after updating the data

Full code:

<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 //获取对应的条目id
				var 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>

Extension: Add page turning and fuzzy query functions to this interface

Effect:

front end:

<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 //获取对应的条目id
				var 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_info
						this.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>

rear end:

  //查询员工详细信息
  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);
  }

Guess you like

Origin blog.csdn.net/weixin_46001736/article/details/132096440
Recommended
Ranking
[Algorithm] greedy _ program scheduling issues
Spring 控制反转（IOC）
Data structure-6.6 figure
Indicates that the class or member method has abstract properties
Huawei v5 server installed Linux operating system
Postgresql source code analysis - creating ordinary tables
Chapter 10 Evaluation Classification Results
Cloud service Ubuntu 20.04 version uses Nginx to deploy static web pages
Java Exercise 17.1
Solve the problem that git cannot automatically push submission in IDEA Push failed: Failed with error: Could not read from remote repository.
Daily
More
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)

Code World

© 2018 codetd.com