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

效果图：

核心解析：

一、

    
        {{item.num_name}}
	

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 //获取对应的条目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:获取被选中行的: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数组的值

全部代码：

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

效果：

前端：

后端：

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