【vue element-ui 】el-table中使用checkbox视图更新滞后

news2024/10/7 4:30:36

本来想通过列表中每个对象的某个属性绑定到checkbox的状态,但是发现有个问题:就是点击复选框后,数据确实改变了,但是视图没有改变,当点击其他row的时候,才会更新之前的数图。如下图,第1次勾选第一行没反应,再点击其他行才会更新视图。

<el-table-column label="是否绑定" min-width="50">
 	<template slot-scope="scope">
        <el-checkbox v-model="scope.row.binded">是否绑定</el-checkbox>
    </template>
</el-table-column>

在这里插入图片描述

解决方法:通过数据驱动视图更新

el-checkbox绑定一个自定义属性,比如data-a=responsive,当点击复选框后,会触发@change事件,在事件处理函数中,改变responsive的值,就会让视图发生更新。

<el-table-column label="是否绑定" min-width="50">
    <template slot-scope="scope">
        <el-checkbox v-model="scope.row.binded"  :data-a="checked" @change="update()">是否绑定</el-checkbox>
    </template>
</el-table-column>

<script>
export default {
	data() {
        return {
        	responsive: true
        }
    }
	method: {
		update(){
		    this.responsive = !this.responsive //数据驱动vue视图更新,解决checkbox视图不更新的问题
		},
	}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/692336.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【JavaScript】严格模式use strict

use strict 它不是一条语句&#xff0c;但是是一个字面量表达式声明&#xff0c;在 JavaScript 旧版本中会被忽略。 为什么使用严格模式use strict: 消除Javascript语法的一些不合理、不严谨之处&#xff0c;减少一些怪异行为; 消除代码运行的一些不安全之处&#xff0c;保证代…

Jmeter调试取样器(Debug Sampler)

大家在调试 JMeter 脚本时有没有如下几种需求&#xff1a; 我想知道参数化的变量取值是否正确&#xff01;我想知道正则表达式提取器&#xff08;或json提取器&#xff09;提取的值是否正确&#xff01;我想知道 JMeter 属性&#xff01;调试时服务器返回些什么内容&#xff0…

复杂数组的处理方法之多维数组扁平化

1.需求: 将数组[1&#xff0c;2&#xff0c;[3&#xff0c;4&#xff0c;[5&#xff0c;6]]&#xff0c;7&#xff0c;[8&#xff0c;[9&#xff0c;10]]] 转换为 [1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5&#xff0c;6&#xff0c;7&#xff0c;8&#xff0c…

五、HAL_Timer的定时功能

1、开发环境 (1)Keil MDK: V5.38.0.0 (2)STM32CubeMX: V6.8.1 (3)MCU: STM32F407ZGT6 2、定时器简介 (1)定时器可以通过输入的时钟源进行计数&#xff0c;从而达到定时的功能。 3、实验目的&原理图 3.1、实验目的 (1)通过定时器设置定时&#xff0c;实现LED灯以500…

13 - 信号可靠性剖析

---- 整理自狄泰软件唐佐林老师课程 查看所有文章链接&#xff1a;&#xff08;更新中&#xff09;Linux系统编程训练营 - 目录 文章目录 1. 信号的可靠性1.1 问题1.2 信号查看&#xff08;kill -l&#xff09;1.3 信号的分类1.3.1 不可靠信号&#xff08;传统信号&#xff09;…

模拟仿真 OSC振荡器

用五个反相器做一个环形振荡器 跑瞬态仿真 发现并未振荡 手动添加起振 成功振荡 将上面的图像send to calculate&#xff0c;调用频率函数freq 可以看到振荡频率为2.5GHZ左右 如果想要降低振荡频率&#xff0c;可以在每个反相器后加寄生电容或者增大反相器尺寸&#xff0c;这…

ProGuard详解 - Java代码混淆

(29条消息) ProGuard详解 - Java代码混淆_黎陌MLing的博客-CSDN博客

【算法题】动态规划基础阶段之 爬楼梯 和 杨辉三角

动态规划基础阶段之爬楼梯和杨辉三角 前言二、爬楼梯2.1、思路2.2、代码实现 三、杨辉三角3.1、思路3.2、代码实现 四、杨辉三角2&#xff08;进阶&#xff09;总结 前言 动态规划&#xff08;Dynamic Programming&#xff0c;简称 DP&#xff09;是一种解决多阶段决策过程最优…

脱机下载程序

一&#xff0c;脱机下载工具 Mini-Pro V2 版 二&#xff0c;配置stm32CubeIDE 生成hex文件 三&#xff0c;脱机下载步骤 1&#xff0c;连接设备&#xff0c;选择芯片 2&#xff0c; 添加固件。 3&#xff0c;选项字节。 4&#xff0c;生成镜像文件&#xff0c;这个文件包含了…

Mysql索引失效情况及避免方式【案例分析】

索引失效情况及避免方式 建表数据sql CREATE TABLE staffs( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(24)NOT NULL DEFAULT COMMENT姓名, age INT NOT NULL DEFAULT 0 COMMENT年龄, pos VARCHAR(20) NOT NULL DEFAULT COMMENT职位, add_time TIMESTAMP NOT NULL DEF…

json数据、日期数据的参数传递及响应

文章目录 1.json数据传参1.1 postman如何发送json数据1.2 发送json数据&#xff0c;控制器如何接收 2. 日期类型参数传递2.1 日期类型参数如何指定格式 3.响应数据3.1 ResponseBody注解的使用 1.json数据传参 首先在maven中添加json坐标 1.1 postman如何发送json数据 1.2 发…

00后测试用例写的实在是.......

实在是太强了&#xff0c;00后测试用例写的比我还好&#xff0c;简直是无地自容… 经常看到无论是刚入职场的新人&#xff0c;还是工作了一段时间的老人&#xff0c;都会对编写测试用例感到困扰&#xff1f;例如&#xff1a; 如何编写测试用例&#xff1f; 作为一个测试新人…

以太网频谱

Speed频谱100BASE-TX1GBASE-T2.5GBASE-T5GBASE-T10GBASE-T

网络程序——定时器

网络程序还有一种需要处理的常用事件——定时事件。服务器程序通常管理着众多定时事件&#xff0c;因此如何有效地组织这些定时事件&#xff0c;使之能在预期的时间点被触发且不影响服务器的主要逻辑&#xff0c;对于服务器的性能有着至关重要的影响。为此&#xff0c;我们要将…

递归 到底应该怎么理解?怎么写递归的代码

今天和大家一起来讨论一下递归&#xff1a; 我们尽可能使按照解题的思路来讨论递归&#xff0c;对于这个在计算机内部具体是怎样实现的&#xff0c;我们不做深入讨论&#xff0c;这里仅仅是简单的讨论一下&#xff1a; 求1 ~ n序列的和&#xff1a;1 2 3 ... n&#xff1…

pwn学习day1——ELF文件结构

0x01 介绍 ELF&#xff08;Executable and Linkable Format&#xff09;是一种常见的可执行文件和共享库格式&#xff0c;其结构如下&#xff1a; ELF header&#xff1a;包含了 ELF 文件的基本属性信息。Program header table&#xff1a;描述了程序在内存中的加载情况&…

Gogs私服搭建

1. Gogs介绍 官网地址&#xff1a;https://gogs.io 文档地址&#xff1a;https://gogs.io/docs Gogs&#xff0c;全称为Go Git Service&#xff0c;是一个基于 Go 语言开发的Git服务。它提供了一个类似于GitHub的界面和功能&#xff0c;允许您在自己的服务器上搭建私有的Git仓库…

幂律智能联合智谱AI发布千亿参数级法律垂直大模型PowerLawGLM

前言 2023年是当之无愧的“大模型之年”&#xff0c;据瑞银集团的一份报告显示&#xff0c;ChatGPT推出仅仅两个月后&#xff0c;月活用户已经突破了1亿&#xff0c;成为史上用户增长速度最快的消费级应用程序。 在炙热的大模型赛道里&#xff0c;基于中文大模型的发布也是层…

二叉树OJ题:LeetCode--104.二叉树的最大深度

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下LeetCode中第104道二叉树OJ题&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; 数据结构与算法专栏&#xff1a;数据结构与算法 个 人…