devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：小蓝xlanll | 2024-05-26 18:35:44

赞

踩

uniapp单选功能

效果图：

核心解析：

一、

  1. <view class="item_all" v-for="(item, index) in info" :key="index">
  2.     <view class='position parameter-info text-over' :class='item.checked?"checked_parameter":""'
  3. 					:data-id="item.employee_num" @tap='selectcustomer'>
  4.         <view class="vv_1">{{item.num_name}}</view>
  5. 	</view>
  6. </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'：点击事件

 二、

  1. info: [{
  2.         employee_num: 1001,
  3. 	    employee_name: '张三',
  4. 	    checked: false,
  5. 	    num_name: '1001-张三'
  6. 	},
  7. 	{
  8. 		employee_num: 1002,
  9. 		employee_name: '李四',
  10. 		checked: false,
  11. 		num_name: '1002-李四'
  12. 	}, {
  13. 		employee_num: 1003,
  14. 		employee_name: '王五',
  15. 		checked: false,
  16. 		num_name: '1003-王五'
  17. 	}, {
  18. 		employee_num: 1004,
  19. 		employee_name: '赵六',
  20. 		checked: false,
  21. 		num_name: '1004-赵六'
  22. 	}],
  23. parameterList: ''

在data中定义数据

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

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

三、

  1. // 参数点击响应事件
  2. selectcustomer: function(e) {
  3.     var this_checked = e.currentTarget.dataset.id //获取对应的条目id
  4. 	var parameterList = this.info //获取Json数组
  5. 	console.log(this_checked)
  6. 	for (var i = 0; i < parameterList.length; i++) {
  7. 		if (parameterList[i].employee_num == this_checked) {
  8. 			parameterList[i].checked = true; //当前点击的位置为true即选中
  9. 			this.parameterList = parameterList[i]
  10. 			console.log('参数', this.parameterList)
  11. 		} else {
  12. 			parameterList[i].checked = false; //其他的位置为false
  13. 		}
  14. 	}
  15.     this.info = parameterList;
  16. },

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数组的值

全部代码：

  1. <template>
  2. 	<view>
  3. 		<view class="top">
  4. 			<view class="search">
  5. 				<view class="search_in">
  6. 					<!-- 使用代码请更改图片路径 -->
  7. 					<image :src="search"></image>
  8. 					<input type="text" placeholder="请输入名称" placeholder-style="color:#CCCCCC" @confirm="search" />
  9. 				</view>
  10. 			</view>
  11. 		</view>
  12. 		<view class="center">
  13. 			<view class="pages_name">
  14. 				<view class="li"></view>
  15. 				<view class="li2">员工信息</view>
  16. 			</view>
  17. 		</view>
  18. 		<view class="all">
  19. 			<view class="item_all" v-for="(item, index) in info" :key="index">
  20. 				<view class='position parameter-info text-over' :class='item.checked?"checked_parameter":""'
  21. 					:data-id="item.employee_num" @tap='selectcustomer'>
  22. 					<view class="vv_1">{{item.num_name}}</view>
  23. 				</view>
  24. 			</view>
  25. 		</view>
  26. 		<view class="button_sure" @tap="sure">
  27. 			<view class="sure_text">确认</view>
  28. 		</view>
  29. 		<!-- 添加按钮 -->
  30. 		<image class='img' :src='add' @tap='add'></image>
  31. 	</view>
  32. </template>
  33.  
  34. <script>
  35. 	export default {
  36. 		data() {
  37. 			return {
  38. 				search: getApp().globalData.icon + 'index/search.png',
  39. 				add: getApp().globalData.icon + 'index/index/add.png',
  40. 				info: [{
  41. 						employee_num: 1001,
  42. 						employee_name: '张三',
  43. 						checked: false,
  44. 						num_name: '1001-张三'
  45. 					},
  46. 					{
  47. 						employee_num: 1002,
  48. 						employee_name: '李四',
  49. 						checked: false,
  50. 						num_name: '1002-李四'
  51. 					}, {
  52. 						employee_num: 1003,
  53. 						employee_name: '王五',
  54. 						checked: false,
  55. 						num_name: '1003-王五'
  56. 					}, {
  57. 						employee_num: 1004,
  58. 						employee_name: '赵六',
  59. 						checked: false,
  60. 						num_name: '1004-赵六'
  61. 					}
  62. 				],
  63. 				parameterList: ''
  64. 			}
  65. 		},
  66. 		methods: {
  67. 			// 参数点击响应事件
  68. 			selectcustomer: function(e) {
  69. 				var this_checked = e.currentTarget.dataset.id //获取对应的条目id
  70. 				var parameterList = this.info //获取Json数组
  71. 				console.log(this_checked)
  72. 				for (var i = 0; i < parameterList.length; i++) {
  73. 					if (parameterList[i].employee_num == this_checked) {
  74. 						parameterList[i].checked = true; //当前点击的位置为true即选中
  75. 						this.parameterList = parameterList[i]
  76. 						console.log('参数', this.parameterList)
  77. 					} else {
  78. 						parameterList[i].checked = false; //其他的位置为false
  79. 					}
  80. 				}
  81. 				this.info = parameterList;
  82. 			},
  83. 		},
  84. 		// onLoad() {
  85. 		// 	uni.request({
  86. 		// 		url: getApp().globalData.position + 'Produce/select_employee',
  87. 		// 		data: {
  88.  
  89. 		// 		},
  90. 		// 		header: {
  91. 		// 			"Content-Type": "application/x-www-form-urlencoded"
  92. 		// 		},
  93. 		// 		method: 'POST',
  94. 		// 		dataType: 'json',
  95. 		// 		success: res => {
  96. 		// 			this.info = res.data.all_info
  97. 		// 		},
  98. 		// 		fail(res) {
  99. 		// 			console.log("查询失败") 
  100. 		// 		}
  101. 		// 	});
  102. 		// }
  103. 	}
  104. </script>
  105.  
  106. <style>
  107. 	/* 背景色 */
  108. 	page {
  109. 		background-color: #F0F4F7;
  110. 	}
  111.  
  112. 	/* 搜索框 */
  113. 	.search {
  114. 		display: flex;
  115. 		align-items: center;
  116. 		justify-content: center;
  117. 		height: 60px;
  118. 		background-color: #fff;
  119. 		/* border:1px solid black; */
  120. 		margin-bottom: 5%;
  121. 	}
  122.  
  123. 	.search .search_in {
  124. 		display: flex;
  125. 		align-items: center;
  126. 		justify-content: space-between;
  127. 		padding: 0 20rpx;
  128. 		box-sizing: border-box;
  129. 		height: 70rpx;
  130. 		width: 90%;
  131. 		background-color: #F0F4F7;
  132. 		border-radius: 5px;
  133. 	}
  134.  
  135. 	.search_in image {
  136. 		height: 45rpx;
  137. 		width: 50rpx;
  138. 		margin-right: 10px;
  139. 		/* border:1px solid black; */
  140. 	}
  141.  
  142. 	.search input {
  143. 		/* border:1px solid black; */
  144. 		width: 100%;
  145. 	}
  146.  
  147.  
  148. 	/* 列表 */
  149. 	.all {
  150. 		margin-bottom: 20%;
  151. 	}
  152.  
  153. 	.item_all {
  154. 		/* border: 1px solid black; */
  155. 		margin-bottom: 3%;
  156. 		display: flex;
  157. 		flex-direction: column;
  158. 		align-items: center;
  159. 		justify-content: center;
  160. 		width: 100%;
  161. 	}
  162.  
  163. 	.position {
  164. 		display: flex;
  165. 		flex-direction: column;
  166. 		justify-content: center;
  167. 		height: 80px;
  168. 		width: 95%;
  169. 		border-radius: 10px;
  170. 		background-color: #fff;
  171. 		box-shadow: 2px 2px 2px gainsboro;
  172. 	}
  173.  
  174. 	.vv_1 {
  175. 		margin-left: 5%;
  176. 		word-break: break-all;
  177. 	}
  178.  
  179. 	/* 选中之后的样式设置 */
  180. 	.checked_parameter {
  181. 		background: #74bfe7;
  182. 		color: #fff;
  183. 	}
  184.  
  185. 	.footer button {
  186. 		width: 100%;
  187. 	}
  188.  
  189. 	/* 标题信息 */
  190. 	.center {
  191. 		display: flex;
  192. 		flex-direction: column;
  193. 		align-items: center;
  194. 		justify-content: center;
  195. 		width: 100%;
  196. 		margin-bottom: 3%;
  197. 	}
  198.  
  199. 	.pages_name {
  200. 		/* border: 1px solid black; */
  201. 		width: 95%;
  202. 		display: flex;
  203. 		align-items: center;
  204. 	}
  205.  
  206. 	.li {
  207. 		/* border: 1px solid black; */
  208. 		width: 15px;
  209. 		height: 15px;
  210. 		border-radius: 100%;
  211. 		background-color: #74bfe7;
  212. 	}
  213.  
  214. 	.li2 {
  215. 		/* border: 1px solid black; */
  216. 		font-size: 110%;
  217. 		margin-left: 2%;
  218. 	}
  219.  
  220. 	/* 悬浮按钮 */
  221. 	.img {
  222. 		float: right;
  223. 		position: fixed;
  224. 		bottom: 10%;
  225. 		right: 2%;
  226. 		width: 100rpx;
  227. 		height: 100rpx;
  228. 	}
  229.  
  230. 	/* 确认按钮 */
  231. 	.button_sure {
  232. 		bottom: 0px;
  233. 		position: fixed;
  234. 		width: 100%;
  235. 		height: 8%;
  236. 		background: #74bfe7;
  237. 		color: white;
  238. 		font-size: 105%;
  239. 		display: flex;
  240. 		align-items: center;
  241. 		justify-content: center;
  242. 	}
  243. </style>

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

效果：

前端：

  1. <template>
  2. 	<view>
  3. 		<view class="top">
  4. 			<view class="search">
  5. 				<view class="search_in">
  6. 					<!-- 使用代码请更改图片路径 -->
  7. 					<image :src="search"></image>
  8. 					<input type="text" placeholder="请输入员工工号" placeholder-style="color:#CCCCCC" @confirm="search_num" />
  9. 				</view>
  10. 			</view>
  11. 		</view>
  12. 		<view class="center">
  13. 			<view class="pages_name">
  14. 				<view class="li"></view>
  15. 				<view class="li2">员工信息</view>
  16. 			</view>
  17. 		</view>
  18. 		<view class="all">
  19. 			<view class="item_all" v-for="(item, index) in info" :key="index">
  20. 				<view class='position parameter-info text-over' :class='item.checked?"checked_parameter":""'
  21. 					:data-id="item.employee_num" @tap='selectcustomer'>
  22. 					<view class="vv_1">{{item.num_name}}</view>
  23. 				</view>
  24. 			</view>
  25. 			<view class="pagination">
  26. 				<view class="page-button" @tap="prevPage">上一页</view>
  27. 				<view class="page-info">{{ page }}</view>
  28. 				<view class="page-info">/</view>
  29. 				<view class="page-info">{{ totalPage }}</view>
  30. 				<view class="page-button" @tap="nextPage">下一页</view>
  31. 			</view>
  32. 		</view>
  33. 		<view class="button_sure" @tap="sure">
  34. 			<view class="sure_text">确认</view>
  35. 		</view>
  36. 		<!-- 添加按钮 -->
  37. 		<image class='img' :src='add' @tap='add'></image>
  38. 	</view>
  39. </template>
  40. <script>
  41. 	export default {
  42. 		data() {
  43. 			return {
  44. 				search: getApp().globalData.icon + 'index/search.png',
  45. 				add: getApp().globalData.icon + 'index/index/add.png',
  46. 				info: [],
  47. 				parameterList: '',
  48. 				like_employee_num: '', //模糊查询的员工工号
  49. 				page: 1, // 当前页数
  50. 				pageSize: 10, // 每页展示的数据条数
  51. 				totalPage: 0, //总页数
  52. 			}
  53. 		},
  54. 		methods: {
  55. 			// 参数点击响应事件，单选的实现
  56. 			selectcustomer: function(e) {
  57. 				var this_checked = e.currentTarget.dataset.id //获取对应的条目id
  58. 				var List = this.info //获取Json数组
  59. 				// console.log(this_checked)
  60. 				for (var i = 0; i < List.length; i++) {
  61. 					if (List[i].employee_num == this_checked) {
  62. 						List[i].checked = true; //当前点击的位置为true即选中
  63. 						this.parameterList = List[i]
  64. 						console.log('参数', this.parameterList)
  65. 					} else {
  66. 						List[i].checked = false; //其他的位置为false
  67. 					}
  68. 				}
  69. 				this.info = List;
  70. 			},
  71. 			//确认
  72. 			sure() {
  73. 				if (!this.parameterList) {
  74. 					uni.showToast({
  75. 						title: '请选择员工',
  76. 						icon: 'none'
  77. 					})
  78. 				} else {
  79. 					uni.$emit('isRefresh', this.parameterList)
  80. 					uni.navigateBack({
  81. 						delta: 1
  82. 					})
  83. 				}
  84. 			},
  85. 			//模糊查询
  86. 			search_num(event) {
  87.                 this.page = 1;//模糊查询默认从首页开始
  88. 				this.like_employee_num = event.target.value;
  89. 				this.getdata()
  90. 			},
  91. 			getdata() {
  92. 				uni.request({
  93. 					url: getApp().globalData.position + 'Produce/select_employee',
  94. 					data: {
  95. 						like_employee_num: this.like_employee_num,
  96. 						page: this.page,
  97. 						pageSize: this.pageSize
  98. 					},
  99. 					header: {
  100. 						"Content-Type": "application/x-www-form-urlencoded"
  101. 					},
  102. 					method: 'POST',
  103. 					dataType: 'json',
  104. 					success: res => {
  105. 						this.info = res.data.all_info
  106. 						this.totalPage = Math.ceil(res.data.total / this.pageSize);
  107. 					},
  108. 					fail(res) {
  109. 						console.log("查询失败")
  110. 					}
  111. 				});
  112. 			},
  113. 			prevPage() {
  114. 			  if (this.page > 1) {
  115. 			    this.page--;
  116. 			    this.getdata();
  117. 			  }
  118. 			},
  119. 			nextPage() {
  120. 			  if (this.page < this.totalPage) {
  121. 			    this.page++;
  122. 			    this.getdata();
  123. 			  }
  124. 			},
  125.  
  126. 		},
  127. 		onLoad() {
  128. 			this.getdata();
  129. 		}
  130. 	}
  131. </script>
  132.  
  133. <style>
  134. 	.pagination {
  135. 		display: flex;
  136. 		align-items: center;
  137. 		justify-content: left;
  138. 		margin-bottom: 20%;
  139. 		/* border: 1px solid black; */
  140. 	}
  141.  
  142. 	.page-button {
  143. 		height: 30px;
  144. 		line-height: 30px;
  145. 		padding: 0 10px;
  146. 		border: 1px solid white;
  147. 		border-radius: 5px;
  148. 		margin: 0 5px;
  149. 		cursor: pointer;
  150. 	}
  151.  
  152. 	.page-info {
  153. 		font-weight: bold;
  154. 	}
  155.  
  156. 	/* 背景色 */
  157. 	page {
  158. 		background-color: #F0F4F7;
  159. 	}
  160.  
  161. 	/* 搜索框 */
  162. 	.search {
  163. 		display: flex;
  164. 		align-items: center;
  165. 		justify-content: center;
  166. 		height: 120rpx;
  167. 		background-color: #fff;
  168. 		/* border:1px solid black; */
  169. 		margin-bottom: 5%;
  170. 	}
  171.  
  172. 	.search .search_in {
  173. 		display: flex;
  174. 		align-items: center;
  175. 		justify-content: space-between;
  176. 		padding: 0 20rpx;
  177. 		box-sizing: border-box;
  178. 		height: 70rpx;
  179. 		width: 90%;
  180. 		background-color: #F0F4F7;
  181. 		border-radius: 10rpx;
  182. 	}
  183.  
  184. 	.search_in image {
  185. 		height: 45rpx;
  186. 		width: 50rpx;
  187. 		margin-right: 20rpx;
  188. 		/* border:1px solid black; */
  189. 	}
  190.  
  191. 	.search input {
  192. 		/* border:1px solid black; */
  193. 		width: 100%;
  194. 	}
  195.  
  196.  
  197. 	/* 列表 */
  198. 	.all {
  199. 		margin-bottom: 20%;
  200. 		border: 1px solid #F0F4F7;
  201. 	}
  202.  
  203. 	.item_all {
  204. 		/* border: 1px solid black; */
  205. 		margin-bottom: 3%;
  206. 		display: flex;
  207. 		flex-direction: column;
  208. 		align-items: center;
  209. 		justify-content: center;
  210. 		width: 100%;
  211. 	}
  212.  
  213. 	.position {
  214. 		display: flex;
  215. 		flex-direction: column;
  216. 		justify-content: center;
  217. 		height: 160rpx;
  218. 		width: 95%;
  219. 		border-radius: 20rpx;
  220. 		background-color: #fff;
  221. 		box-shadow: 4rpx 4rpx 4rpx gainsboro;
  222. 	}
  223.  
  224. 	.vv_1 {
  225. 		margin-left: 5%;
  226. 		word-break: break-all;
  227. 	}
  228.  
  229. 	/* 选中之后的样式设置 */
  230. 	.checked_parameter {
  231. 		background: #74bfe7;
  232. 		color: #fff;
  233. 	}
  234.  
  235. 	.footer button {
  236. 		width: 100%;
  237. 	}
  238.  
  239. 	/* 标题信息 */
  240. 	.center {
  241. 		display: flex;
  242. 		flex-direction: column;
  243. 		align-items: center;
  244. 		justify-content: center;
  245. 		width: 100%;
  246. 		margin-bottom: 3%;
  247. 	}
  248.  
  249. 	.pages_name {
  250. 		/* border: 1px solid black; */
  251. 		width: 95%;
  252. 		display: flex;
  253. 		align-items: center;
  254. 	}
  255.  
  256. 	.li {
  257. 		/* border: 1px solid black; */
  258. 		width: 30rpx;
  259. 		height: 30rpx;
  260. 		border-radius: 100%;
  261. 		background-color: #74bfe7;
  262. 	}
  263.  
  264. 	.li2 {
  265. 		/* border: 1px solid black; */
  266. 		font-size: 110%;
  267. 		margin-left: 2%;
  268. 	}
  269.  
  270. 	/* 悬浮按钮 */
  271. 	.img {
  272. 		float: right;
  273. 		position: fixed;
  274. 		bottom: 15%;
  275. 		right: 2%;
  276. 		width: 100rpx;
  277. 		height: 100rpx;
  278. 	}
  279.  
  280. 	/* 确认按钮 */
  281. 	.button_sure {
  282. 		bottom: 0rpx;
  283. 		position: fixed;
  284. 		width: 100%;
  285. 		height: 8%;
  286. 		background: #74bfe7;
  287. 		color: white;
  288. 		font-size: 105%;
  289. 		display: flex;
  290. 		align-items: center;
  291. 		justify-content: center;
  292. 	}
  293. </style>

后端：

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/627885
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号