layui + vue实现list单选列表

太过爱你忘了你带给我的痛 2021-12-15 19:37 445阅读 0赞

根据下拉框选择内容，动态生成单选列表。

### html ###

<div class="layui-col-xs3 layui-col-sm3 layui-col-md2 treeDiv layui-form"  lay-filter="selFilter" >
    	<p class="treeTitle" align="center">单选列表</p>
    	<div class="treeSeach layui-inline" style="width: 90%; padding-right: 5%;" id="state_select">
    		<select name="org" id="org" lay-filter="orgInfo"></select>
    	</div>
    	<div style="height: 90%;" id="rtu_list">
    		<ul style="height: 100%; padding-left: 25px;">
    			<li v-for="item in items">
    				<input name="rtu" :title="item.name" type="radio" :value="item.rtu_no" lay-filter="rtu_obj">
    			</li>
    		</ul>
    	</div>
    </div>

### js ###

var vm = new Vue({
    	el: "#rtu_list",
    	data:{
    		items:[]
    	}
    })
    
    layui.use(['layer', 'form', 'table'], function() {
    	var layer = layui.layer,
    		form = layui.form,
    		table = layui.table,
    		$ = layui.jquery,
    		laypage = layui.laypage;
    
    	//var org_cid = LocalData.getOrg().cascade_id;
    	//var org_id = LocalData.getOrg().id;
        var org_cid = "0.001";
        var org_id = "3";
    	
    	
    	select.setUrlSelectData("/admin/org/list",{cascade_id:org_cid},"org","selFilter",form,false,function(data){
    		$("#org").val(org_id);
    		form.render('select', 'selFilter');
    		queryRtuList(org_id);
    	});
    	
        //下拉框选中事件
    	form.on('select(orgInfo)', function(data){
    		queryRtuList(data.value);
    		Table.removeData('tableReload',table);
    	});    
    	
    	function queryRtuList(id){
    		if(comm.isEmpty(id)){
    			vm.items = [];
    		}else{
    			Ajax.Post(rtu_url,{org_id: id},function(data){
    				vm.items = data.data;
    			});
    		}
    		setTimeout(function(){
    			form.render('radio', 'selFilter');
    		},100)
    	}
    	
        //列表单选事件
    	form.on('radio(rtu_obj)', function(data){
    		if( param.rtuNo != data.value){
    			param.rtuNo = data.value;
    			tableRender();
    		}
    	});  
    
    });

![20190703103641108.png][]

[20190703103641108.png]: /images/20211215/23bb4e896d0d4a76b3cb31477dcd5169.png

发表评论取消回复

表情：

评论列表（有 0 条评论，445人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui checkbox设置只能单选

HTML代码： <fieldset style="border:1px solid 2779aa;height:190px;width:100px;margin

野性酷女/ 2023年10月18日 14:17/ 0 赞/ 134 阅读

相关【vue】实现单选框二级联动

需求：选择用工形式后，薪资才出现内容。薪资的内容随着用工形式的选择发生变化。当清除薪资中的内容时，用工形式的内容不会被清除；当清除用工形式中的内容时，薪资中的内容

本是古典何须时尚/ 2023年09月27日 08:16/ 0 赞/ 49 阅读

相关 Iview列表实现单选按钮

let self = this columns.push({ title:"选择", width: 80, align: 'cen

骑猪看日落/ 2023年05月31日 02:38/ 0 赞/ 21 阅读

相关 Android实现弹出列表、单选、多选框

本文实例为大家分享了Android实现弹出列表、单选、多选框的具体代码，供大家参考，具体内容如下效果图如下： ![在这里插入图片描述][watermark_type_Z

阳光穿透心脏的1/2处/ 2022年12月09日 04:53/ 0 赞/ 270 阅读

相关 vue 实现多选和单选

这里是多选： ![20200821101725562.png][] 上个小小的效果图，然后具体实现看代码 template <view v-for="(it

￡神魔★判官ぃ/ 2022年11月29日 12:53/ 0 赞/ 211 阅读

相关 Vue el-tree实现单选效果

场景：今天在做项目的时候，前端业务数据设计到树形展示，并需要单选，打开Element，选中 el-tree 组件，但官方文档中只支持多选，并不支持单选，需要

清疚/ 2022年11月05日 06:28/ 0 赞/ 197 阅读

相关 VUE：checkbox 单选框（单选、多选）、一选全选 / 全选一选、表格单选列实现

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] 1. 效果：如红框中部分。一选全选：表头上的单选框

怼烎@/ 2022年03月28日 10:50/ 0 赞/ 1045 阅读

相关 layui + vue实现list单选列表

根据下拉框选择内容，动态生成单选列表。 html <div class="layui-col-xs3 layui-col-sm3 layui-col-md2 t

太过爱你忘了你带给我的痛/ 2021年12月15日 19:37/ 0 赞/ 446 阅读

相关 Vue中表单控件（实现多选/反选、删除、单选功能）

Vue中表单控件（实现多选/反选、删除、单选功能） <html lang="en"> <head> <meta charset="UTF-8"

怼烎@/ 2021年12月07日 13:07/ 0 赞/ 857 阅读

相关 vue - 实现单选和多选

1、效果图： ![在这里插入图片描述][20190920151509779.gif] 2、具体实现过程： <template> <div cl

冷不防/ 2021年08月13日 21:47/ 0 赞/ 667 阅读