uni-app: realice la función de selección única de la lista

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

Representaciones:

Análisis del núcleo:

uno,

<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" : muestra los datos en un bucle

:class='item.checked? "checked_parameter":"" ' : Si el item.checked de la línea actual es verdadero, si es verdadero, ejecute class="checked_parameter", si no, ejecute class="", Eso es juzgar si la fila de datos está seleccionada y seleccionar para cambiar el color

:data-id="item.employee_num" : use la directiva v-bind en uni-app para data-idvincular el atributo al item.employee_numvalor de esta expresión. data-ides un atributo personalizado que se puede utilizar para almacenar datos adicionales sobre un elemento. Eso es vincular un valor para una fácil referencia en js

@tap='selectcustomer' : haga clic en evento

 dos,

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

Definir datos en datos

info (también se puede establecer en una matriz vacía para solicitar datos del servidor)

lista de parámetros : defina una cadena para almacenar la información de la fila de los datos seleccionados

tres,

// 参数点击响应事件
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 : Obtenga el valor de la fila seleccionada: data-id (employee_num)

var parámetroList = this.info : Obtenga la información de valor de todas las matrices

for (var i = 0; i <parameterList.length; i++) : recorrer los datos de información

if (parameterList[i].employee_num == this_checked) : determine si cada empleado_num en info es igual al empleado_num de la fila seleccionada

parametrList[i].checked = true; : establece el valor verificado de esta línea de datos en la matriz de información que cumple las condiciones en verdadero, lo que significa que esta línea de datos está seleccionada

this.parameterList = ParameterList[i] : es decir, establezca el valor de la lista de parámetros definida en los datos en esta línea de datos en la información de la matriz

ParameterList[i].checked = false;: Filas insatisfactorias, debe establecer el valor de checked en false

 this.info = lista de parámetros; : redefine el valor de la matriz de información después de actualizar los datos

Código completo:

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

Extensión: agregue funciones de cambio de página y consulta difusa a esta interfaz

Efecto:

Interfaz:

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

extremo posterior:

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

Supongo que te gusta

Origin blog.csdn.net/weixin_46001736/article/details/132096440
Recomendado
Clasificación
Diario
Más
2024-05-14(10)
2024-05-13(7)
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)

Code World

© 2018 codetd.com