多选框回显之不用each 手写多选框回显

  • 应用场景:需要将所有的多选框的标签的值拿到注意不是value值 是标签的文本,然后根据后台(java)传过来的值进行回显
  • 代码如下:
		var role = obj.roleName.split(",");//后台传过来的字符串
		var check = [];
		var checkBoxAll = $("#rolechose2 [name='checkbox']");//获取所有多选款的标签
		for (var i = 0; i < checkBoxAll.length; i++) {
		    if (checkBoxAll[i]) {
		        check.push(checkBoxAll[i].nextSibling.nodeValue)//将多选框的标签文本重新赋值到一个新的数组
		    }
		}
		for (var i = 0; i < role.length; i++) {//循环后台传过来的名称
		    for (var j = 0; j < check.length; j++) {//循环所有的标签文本
		        if (role[i] == check[j]) {
		            $("#rolechose2 [name='checkbox']").eq(j).attr("checked", true);//注意此处j要和标签文本数组下标一致
		        }
		    }
		}
  • 原因:之所以写这篇文章,主要是我们前端没在,要我写前端代码,发现之前网上的each标签不适合业务场景,所以写下这篇小博,希望能帮到各位,不喜勿喷
### 实现多选框功能 为了实现在 `Element UI` 表单中多选框 (`el-checkbox`) 的功能,可以采用如下方法: 当页面加载时,获取到已有的选项列表以及当前应被选中的项的数据。遍历这些数据并与界面上的每一个多选框对比其唯一标识符(通常是 ID 或者其他唯一字段),如果匹配,则设置该多选框为选中状态。 具体来说,在 Vue 组件内定义一个属性用于存储初始状态下应该被勾选的项目集合,并将其绑定至 `v-model` 属性上;同时利用 `watch` 监听器来监听这个集合的变化以便及时更新视图层的状态[^2]。 下面是一个简单的例子展示如何操作: ```html <template> <div> <!-- 定义一个多选框组 --> <el-checkbox-group v-model="selectedItems"> <el-checkbox v-for="(item, index) in items" :key="index" :label="item.id">{{ item.value }}</el-checkbox> </el-checkbox-group> </div> </template> <script> export default { data() { return { // 假设这是从服务器端接收到的数据 allOptions: [ { id: '0', value: "油电混合"}, { id: '1', value: "汽油车"}, { id: '2', value: "纯电动"} ], selectedIds: ['0','2'], // 这里表示默认要选中的ID items: [], // 页面实际渲染使用的items selectedItems: [] // 用户最终选择的结果集 }; }, created(){ this.items = this.allOptions; // 将需要默认选中的IDs转换成对应的对象形式存入selectedItems let tempSelectedItems = []; for(let i=0;i<this.selectedIds.length;i++){ const selectedItem = this.allOptions.find(item => item.id === this.selectedIds[i]); if(selectedItem){ tempSelectedItems.push(selectedItem); } } this.selectedItems = tempSelectedItems.map(item=>item.id); }, }; </script> ``` 在这个案例中,`allOptions` 是模拟的服务端返的所有可选项,而 `selectedIds` 列表包含了那些应当预先被标记为已选中的条目。通过在组件创建完成后初始化这两个变量并填充相应的值,就可以达到预期的效果了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值