🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 表格内switch获取行数据 ## 12.1.表格内switch获取行数据 [用户管理](https://demo.easyweb.vip/iframe/page/system/user.html)演示了表格内开关switch的使用,这里只用到了数据的id修改状态, 如果要获取所在行的更多数据,可以通过加`data-`属性: ~~~ <script type="text/html" id="userTbState"> <input type="checkbox" lay-filter="userTbStateCk" value="{{d.userId}}" lay-skin="switch" data-name="{{d.username}}" data-sex="{{d.sex}}" lay-text="正常|锁定" {{d.state==0?'checked':''}}/> </script> <script> form.on('switch(userTbStateCk)', function (obj) { var id = obj.elem.value; var data = $(obj.elem).data(); console.log(id + data.name + data.sex); }); </script> ~~~ 也可以利用`LAY_TABLE_INDEX`获取: ~~~ <script type="text/html" id="userTbState"> <input type="checkbox" lay-filter="userTbStateCk" value="{{d.LAY_TABLE_INDEX}}" lay-skin="switch" lay-text="正常|锁定" {{d.state==0?'checked':''}}/> </script> <script> form.on('switch(userTbStateCk)', function (obj) { var index = obj.elem.value; var data = table.cache['userTable'][index]; console.log(data.userId + data.username); }); </script> ~~~ 表格中的下拉框select的用法与表格中的开关switch是一样的,可以参考使用: ~~~ <!-- 表格性别选择列 --> <script type="text/html" id="tbBasicTbSex"> <div class="ew-select-fixed"> <select lay-filter="tbBasicTbSexSel" data-index="{{d.LAY_TABLE_INDEX}}"> <option value="">请选择</option> <option value="男" {{d.sex=='男'?'selected':''}}>男</option> <option value="女" {{d.sex=='女'?'selected':''}}>女</option> </select> </div> </script> <script> form.on('select(tbBasicTbSexSel)', function(obj){ var index = $(obj.elem).data('index'); var data = table.cache['userTable'][index]; console.log(data); // 得到当前行数据 console.log(obj.value); // 得到被选中的值 }); </script> ~~~