Elementui在el-table自定义头部中使用el-checkbox导致el-checkbox点击不改变视图

于 2023-02-13 15:43:19 发布 380 收藏 1
文章标签： elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L1515115/article/details/129010256
版权

今天遇到一个很奇怪的bug，在使用el-table头部插槽中使用了el-checkbox，导致我怎么点击复选框就是不改变

在控制台打印了el-checkbox 身上 v-model 的值，值是改变了但视图就是不更新，以至于我使用了this. s e t 和 t h i s . set 和 this. set和this.fuorceUpdate() 连 v-if 我都用上了，发现就是不好使，后来发现我在使用了 的时候没有使用 slot-scope=‘scope’ , 当时把我腿打断我都没想到问题会出现在这里，看下面代码块。

<el-table>
	<el-table-column slot='header' **slot-scope='scope'**>
	</el-table-column>`
</el-table>``
// 解决办法就是 slot-scope='scope' 一定要加上 。

具体原因还在找....
记录文章
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Vue动态生成el-checkbox点击无法赋值的解决方法
10-17
主要给大家介绍了关于Vue动态生成el-checkbox点击无法赋值的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue+element 当el-table中使用el-checkbox全选视图不更新解决方法
周家大小姐
08-18 1903
加一个key就好了; 代码: <template> <div> <el-form :model="ruleForm" :rules="rules" key="ruleForm" ref="ruleForm" label-width="130px"> <el-row> <el-col :span="8"> <el-form-.
el-table checkbox （解决label值相同同时变化、checkbox状态无法动态更新)
song766426的博客
08-09 1729
解决checkbox label值相同、视图无法更新问题
element ui table编辑回显数据无法再在修改，input失效
m0_59547707的博客
04-10 100
table编辑回显数据无法再在修改
vxe-table vue表格解决方案-其他
06-11
vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念： 面向现代浏览器，高效的简洁 API 设计 模块化表格、按需加载、插件化扩展 为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能 功能： Basic table （基础表格） Grid （高级表格） Size （尺寸） Striped （斑马线条纹） Table with border （带边框） Cell style （单元格样式） Column resizable （列宽拖动） Maximum table height （最大高度） Resize height and width （响应式宽高） Fixed column （固定列） Grouping table head （表头分组） Highlight row and column （高亮行、列) Table sequence （序号) Radio （单选) Checkbox （多选） Sorting （排序） Filter （筛选） Rowspan and colspan （合并行或列） Footer summary （表尾合计） Import （导入) Export （导出) Print （打印) Show/Hide column （显示/隐藏列） Loading （加载中） Formatted content （格式化内容） Custom template （自定义模板） Context menu（快捷菜单） Virtual Scroller（虚拟滚动） Expandable row （展开行） Pager（分页） Form（表单） Toolbar（工具栏） Tree table （树形表格) Editable CRUD（增删改查) Validate（数据校验） Data Proxy（数据代理） Keyboard navigation（键盘导航） Modal window（模态窗口） Charts（图表工具） 更新日志： v4.0.20 table 修改单选框、复选框获取值错误问题 grid 修复 KeepAlive 中报错问题
el-checkbox状态不更新问题与form校验问题
qq_37807767的博客
09-16 4967
el-checkbox状态不更新问题 在项目中遇到了这样一个问题： 点击checkd不生效，但是选择form表单其他单选框的时候，el-checkd更新了 于是想到可能是vue没有监控到，用 this.$set(this.formItem, 'resourcePlace', []) 替换为 this.formItem.resourcePlace = [] 嗯？？？可以了？？？什么情况？？？ 去看了下vue的官方文档，发现了vue.$set作用如下 我这是瞎猫碰上死耗子了吗？ el-checkbox其他解.
vue2 element-ui el-checkbox 视图不更新问题
weixin_45143856的博客
08-16 3766
响应式数据更新，视图不发生变化 vue2 el-element ui el-checkbox 复杂数据类型
Element Table使用复选框时，改变复选框状态时，数据改变，视图不变
Tdliche1的博客
06-29 1577
先说明一下问题场景： 使用了Element UI 的 Table组件，其中多列用到了复选框组件。当修改复选框状态时，数据发生了变化，视图却没有改变。
elementUI点击多选框数据改变，视图不改变问题
小太阳的博客
03-12 3310
先说一下我的场景： 就是在表格里面选择某种产品，然后把这些产品加入订阅单，点击订阅单，就出现下面的图片，默认所有的产品全选，我就给所有数据加了一个chenked为true的属性 遇到的问题：由于数据是从表格传过来的，然后点击发布渠道，发现控制台数据变了，但是视图并没有更新，如下图：我点击测试模型，控制台打印为false，但是视图就是不改变 原因：由于我传过来的数据是数组，如下图，数组中数据发生变化，vue是侦听不到的，但是重写的这几个数组的方法（比如splice()、pop、push等）修改的数组是可
vue checkbox 复选框值改变了界面不刷新
weixin_46028318的博客
05-05 1154
用 this.$forceUpdate()强行刷新页面 改变checkbox的值
element-ui - el-checkbox绑定失效
nunumaymax的博客
10-27 2190
原文地址：vue与element ui的el-checkbox的坑。
elementUi中checkbox的属性indeterminate 状态和v-model的关系
01-08
如果false false样式为不勾 效果如下： -1>{{item.label}} 禁止编辑的时候你需要考虑hdIsIndeterminate和hdCheckAll的值 handleCheckAllChange(val, key) { console.log(val, key, 'key') let
nested_el-checkbox:element-ui的el-checkbox实现嵌套多选，单选
05-12
nested_el-checkbox element-ui的el-checkbox实现嵌套多选，单选 tips:chrome获取本地json数据时会产生跨域问题，建议用firefox直接打开 效果图 主要功能： 实现多选框层级嵌套 当选中一个二级子菜单的时候，其对应...
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
10-17
主要介绍了浅谈vue中关于checkbox数据绑定v-model指令的个人理解,v-model用于表单的数据绑定很常见，下面就来详细的介绍一下
详解element-ui表格中勾选checkbox，高亮当前行
10-16
主要介绍了详解element-ui表格中勾选checkbox，高亮当前行，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-checkbox:具有纯CSS3广播的UI库，可进行检查，切换
05-09
el-checkbox一套纯css3的单选、复选、开关UI库。A UI library with pure CSS3 radio, check, switch.Description组件引入blue、red、green、yellow四种主题色(参考了element UI的颜色)命名空间也为el-，均以em为单位...
vue element 用table嵌套多选框checkbox
本博客暂停使用
01-08 4957
vue前端ui为element，在table的每一行中嵌套checkbox，并实现每一行的选择与多选框的对应，尽量在设计上完善、功能上完备一些，方便以后改造成各种其他复杂的功能。
html table中勾选,el-table里面勾选顺序导致内容不更新
weixin_39795284的博客
06-18 162
需求：点击，左边勾选之后。右边的输入框内的值变成30(只针对当前行生效)默认不填的话。值我null遇到的问题：我已经实现了点击实现输入框内容变成30但是如果先点击左边的选中之后再修改右边的值。却不生效。只能先在右边修改好了值。再点击左边勾选，这样才能保存成功正确的值。如图：代码：` ref="interfaceTable">placeholder="默认值:30"v-model="...
el-checkbox状态值修改而样式不修改的原因
qq_51741730的博客
09-14 865
el-checkbox状态值修改而样式不修改的原因
vue中el-checkbox为什么实现不点击的时候不传值呢
最新发布
05-01
在vue中，el-checkbox组件默认是绑定的一个布尔型的值，也就是说，当勾选或取消勾选时，会将一个true或者false的值传给绑定的变量。 如果el-checkbox实现不点击的时候不传值，那么可能是因为没有绑定任何变量或者绑定的变量没有初始化，例如下面的代码： <el-checkbox> </el-checkbox> 这样的话，即使用户勾选或者取消勾选，vue也没有任何需要接收的变量来接收这个值，因此默认不会传值。 另一种情况是，在代码中直接设置了默认的勾选状态，例如： <el-checkbox :checked="true"> </el-checkbox> 这时候，也没有绑定任何变量，因此默认不会传值。 总之，如果想要获取用户操作el-checkbox的结果，必须要将它的值绑定到一个变量上，例如： <el-checkbox v-model="isChecked"> </el-checkbox> 这样，当用户勾选或者取消勾选时，isChecked的值会被更新，从而可以获取到用户操作的结果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

记录文章

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

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

打赏作者

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

抵扣说明：

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

余额充值