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

news/2024/7/10 1:52:33 标签: javascript, elementui, vue

本来想通过列表中每个对象的某个属性绑定到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>javascript">
export default {
	data() {
        return {
        	responsive: true
        }
    }
	method: {
		update(){
		    this.responsive = !this.responsive //数据驱动vue视图更新,解决checkbox视图不更新的问题
		},
	}
}
</script>


http://www.niftyadmin.cn/n/474412.html

相关文章

【雕爷学编程】Arduino动手做(131)---跑马灯矩阵键盘模块

37款传感器与执行器的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&am…

Flink-面试题

1.实操&#xff1a;熟练书写Flink的WordCount代码 import org.apache.flink.api.common.RuntimeExecutionMode; import org.apache.flink.api.common.eventtime.WatermarkStrategy; import org.apache.flink.api.common.functions.FlatMapFunction; import org.apache.flink.a…

Android Jetpack Compose之TabRow的使用

Android Jetpack Compose是一个现代化的UI工具包&#xff0c;它让开发者可以以声明式的方式来构建出美观且功能强大的Android应用。在本文中&#xff0c;我们将详细介绍其中的一个重要组件——TabRow。 一. TabRow简介 TabRow是Jetpack Compose中的一个组件&#xff0c;主要用…

题目:1742.盒子中小球的最大数量

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;1742. 盒子中小球的最大数量 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 暴力遍历&#xff0c;计算并对所有数字的各位和计数&#xff0c;最后返回最大数量。 解题代码&#xff1a; c…

计算机图形学综述(一)

计算机已经成为快速、经济地生成图片的强大工具。实际上已经没有哪个领域不能从使用图形显示中获益&#xff0c;因此也就不奇怪为什么计算机图形学的应用是那么广泛。虽然早期的工程和科学上的应用必须依赖于昂贵而笨重的设备&#xff0c;但是计算机技术的发展已经将交互式计算…

目前全网LangChain最全干货整理||推荐给有缘人

LangChain资料整理 LangChain中文网&#xff0c;目前做的还不错&#xff0c;可以自称中文网&#xff1a;LangChain中文网: 500页超详细中文文档教程&#xff0c;助力LLM/chatGPT应用开发 – LangChain中文网 LangChain-专栏 思考实践//毛遂自荐&#xff0c;我自己的专栏&…

8.3 PowerBI系列之DAX函数专题-矩阵Matrix中高亮显示最大最小值

需求 用颜色标量年度最大最小值 用颜色标示折线的最大值最小值 实现 在条件格式–规则–基于字段进行计算 度量值 is_max_min var displayed_data calculatetable( addcolumns( summarize(‘订单表’&#xff0c;‘产品表’[商品次级类别]&#xff0c;‘订单表’[订单日…

C#WPF开发如何减少程序的内存占用

最近开发了一款应用&#xff0c;内存占用比较高&#xff0c;希望降低应用占用的内存&#xff0c;于是查阅相关知识&#xff0c;整理总结如下&#xff1a; 在C#开发中&#xff0c;如果你希望减少程序的内存占用&#xff0c;有一些常见的优化策略可以参考&#xff1a; 及时释放不…