解决elementUI中使用checkbox无法选中的问题

最新推荐文章于 2024-04-24 14:36:16 发布
最新推荐文章于 2024-04-24 14:36:16 发布
阅读量1.4k 收藏 10
点赞数 12
分类专栏： elementUi 文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41957626/article/details/135736816
版权

解决elementUI中使用checkbox无法选中的问题

事情的开始是这样的，有一个属性是isCheck，后端是没有返回这个字段的，但是前端需要将这个属性绑定到el-checkbox上去，但是前端采用循环的方式去生成el-checkbox不行。isCheck每个都有，但是就是无法选中，原因是缺少get和set方法。

 原先的写法

循环

dataList[i].isCheck = false

上面的写法是不行的。

解决的方法。

循环
this.$set(dataList[i],"isCheck",false)

经过$set就可以把属性设置成动态的值了。

- 参数1是我们的item

- 参数2是我们需要设置的属性

- 参数3是我们设置的参数的值

简单点了
关注
  • 12
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
修改vue elementUI多选框问题 elementui lib
01-22
问题：elementUI多选框，一维数组，如官网例子那样数组内元素为字符串时正常使用，但在实际情况多选框的元素为对象，为对象时，默认选中不显示，实际上是选中了，但是不显示 https://blog.csdn.net/qq_42383283/article/details/122640364
element组件点击复选框不选中问题
m0_49789433的博客
12-20 3205
element组件点击复选框不选中问题 问题复现 点击却选不中（代码如下） <el-checkbox-group v-model="Form" :max="max" :min="min"> <el-checkbox v-for="(choice,index3) in data.choices" :key="index3" ></el-checkbox> </el-checkbox-group> 问题解析：如果ma...
使用prop解决一个checkbox选中后再次选中失效的问题
08-30
下面小编就为大家带来一篇使用prop解决一个checkbox选中后再次选中失效的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
复选框 el-checkbox选不上
qq_37418556的博客
06-02 3132
复选框 el-checkbox选不上 <el-form v-for="(item,index) in list" :key="index"> <el-form-item> <el-checkbox-group v-model="item.myArr"> <el-checkbox v-for="(ele,index) in item.checkBoxList" :key="ele.id" :label="ele.label">{{e
vue与element ui的el-checkbox的坑el-checkbox不能选中或者选中不能取消
热门推荐
jerryyang_2017的博客
06-17 2万+
一，场景 通过使用checkbox，实现如图的场景， 点击某个tag，实现选中和非选中状态。 二， 官网的例子 通过切换checked值为true或者false来实现，一个checkbox的状态切换 <template> <!-- `checked` 为 true 或 false --> <el-checkbox v-model="checked">备选项</el-checkbox> </template> <scr
el-checkbox遇到的渲染和勾选的问题
qq_41838435的博客
12-07 2665
el-checkbox遇到的渲染和勾选的问题 使用场景 要求：多个el-checkout，可多选，但最多选6个，再次勾选会失败并提醒最多勾选六个。 场景：已勾选6个，再去勾选第七个时，勾选失败、弹出提醒，此时取消一个已勾选，再次勾选第七个，需点击两次才能选中 解决方法：在change后面添加native <div v-for="item in dataList" :key="item.id"> <span>已选中{{ item.order }}个</span>
el-checkbox点击没反应
I'm your wrong princess
10-23 6305
el-checkbox点击没反应 解决思路： <el-checkbox-group v-model="userid"> <el-checkbox v-for="item in userlist" :key="item.name" :label="item.name" @change="AAA(userid)"> </el-checkbox&g...
记一次el-checkbox包裹一层div，点击div勾选复选框，点击复选框却没反应的bug
m0_65915285的博客
07-27 1616
如图，点击div时，点击div取消，勾选复选框是正常的，但是点击复选框却失效，这是由于冒泡，相当于改了两次checked的值，造成值没变，只需要给checkbox的点击事件取消冒泡就可以了。
element ui多选框（Checkbox 多选框、Select多选框）编辑时无法选中的解决办法
qq3892997的博客
11-02 4587
element ui多选框（Checkbox 多选框、Select多选框）编辑时无法选中的解决办法
el-checkbox在el-dialog里 不会被勾选的问题
Patrick_hyp的博客
01-13 2479
elmentui中checkbox遇到的问题
解决 Vue 中的Element-ui 组件el-checkbox动态赋值点击没反应问题
Qensq的博客
11-21 1万+
&lt;el-checkbox :value="form.reaudit === '1'" @change="val =&gt; $set(form,'reaudit',val ? '1' : '0')"&gt;是否需要复核&lt;/el-checkbox&gt; data() { return { form: { reaudit: '' } }...
Vue动态生成el-checkbox点击无法赋值的解决方法
10-17
主要给大家介绍了关于Vue动态生成el-checkbox点击无法赋值的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
ie中js创建checkbox默认选中问题探讨
10-26
js创建checkbox默认选中在某些特殊情况下还是比较实用的，下面有个不错的示例，大家可以参考下
elementUi中checkbox的属性indeterminate 状态和v-model的关系
01-08
华东 对于indeterminate和v-model绑定的hdIsIndeterminate和hdCheckAll的值 如果true true 或者 true false样式为- 如果false true样式为√ 如果false false样式为不勾 效果如下： -1>{{item.label}} ...
ng-repeat中Checkbox默认选中的方法教程
10-18
主要给大家介绍了关于ng-repeat中Checkbox默认选中的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
让checkbox不选中即将选中的checkbox不选中
09-04
把选中的checkbox置空，即将选中的checkbox不选中，实现的方法很多，下面为大家分享个不错可行，已测试的好方法，希望对大家有所帮助
Element-plus使用记录
最新发布
IT菜鸟
04-24 263
Element-plus使用中遇到的问题与解决方案。
el-popover放在el-table中点击无反应问题
Z_Gleng的博客
04-24 335
我们想在table中给btn加弹框但是 el-popover点击按钮没有任何反应。:通过插槽去添加这个组件el-popover的id是否绑定了一个值。给每个el-popover都加上单独的id。代码 给每个组件都绑定ref。通过他的id去控制关闭。
element plus：tree拖动节点交换位置和改变层级
1111111111
04-23 425
图层list里有各种组件，用element plus的tree来渲染，可以把图片等组件到面板里，面板是容器，非容器组件，比如图片、文本等，就不能让其他组件拖进来。对于其他组件来说，只有before和after是允许的，所以当type不等于inner的时候，allow-drop的返回值才是true，否则是false。比如把A节点向B节点拖动，before表示把A拖到B的前面，after表示把A拖到B的后面，inner表示把A拖到B里面去。关键点：draggable为true，设置allow-drop方法。
elementui 多选Checkbox是否被选中
05-30
在 `element-ui` 中，你可以使用 `v-model` 指令绑定多选框（Checkbox）的选中状态，并在组件上添加 `true-value` 和 `false-value` 属性来指定选中和未选中时的值。当多选框被选中时，`v-model` 绑定的值会被设置为 `true-value`，否则为 `false-value`。 因此，你可以通过判断 `v-model` 绑定的值是否与 `true-value` 相等来判断多选框是否被选中。以下是示例代码： ```vue <template> <div> <el-checkbox v-model="isChecked" true-value="yes" false-value="no">Checkbox</el-checkbox> <p>{{isChecked}}</p> </div> </template> <script> export default { data() { return { isChecked: 'no' } } } </script> ``` 在上面的代码中，当多选框被选中时，`isChecked` 的值会被设置为 `true-value`，即 `'yes'`。因此，你可以通过判断 `isChecked === 'yes'` 来判断多选框是否被选中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

简单点了

谢谢大佬

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值