VUE element-ui 中全选与分页结合后不能选中的坑

今天如往常编写程序时,突然发现,用了表格分页后,突然不能全选了。。。。各种纠结! 最后使利用Vue中的监听属性完成了项目要求;接下来步入正题!!!

侦听属性

一、侦听属性使用Vue实例的watch选项实现

二、格式一:书写在Vue实例内部。

例:

watch:{
    
    
被侦听的变量:function(newValue,oldValue){
    
    
       ……
  }
}
侦听属性的参数:
newValue 表示被侦听的变量变化后的值
oldValue  表示备侦听的变量变化前的值

三、

侦听属性必须是出现在Vue实例data区中的变量。

四、

侦听属性的含义:当被侦听的变量发生变化时,执行侦听属性所对应的函数。

五、

侦听属性的高级选项:
① immediate:设置侦听属性对应的函数是否在Vue实例创建时立即执行。默认值为false,表示默认情况下不立即执行。
② deep:设置侦听属性是否采用深度侦听模式,即是否希望侦听一个对象类型的变量中所有的成员。默认值为false。

例:

对一个对象类型的变量进行侦听。当该对象变量中任何一个键名的值发生变化时都执行侦听函数。
var obj={
    
    a:10,b:20};
watch:{
    
    
	  obj:{
    
    
		    handler:function(newValue,oldValue){
    
    },
		    deep:true
		}
}
今天我们利用侦听属性中的《深度侦听》来解决我们遇到的问题!!

本vue页面中,使用接口调取后台数据,并绑定显示到页面中,代码如下:

在这里插入图片描述

在钩子函数中 获取数据,并赋值给数据区变量,然后绑定到表格中,渲染显示数据,并利用pagination进行分页;

我们在添加数据区变量时,需要制作两个数组,一个数组用来操作,一个数组用来显示。

在这里插入图片描述
在这里插入图片描述

利用侦听属性进行变量值的深度侦听
在这里插入图片描述

在侦听属性中,开启deep与immediate,取值为true在这里插入图片描述
判断批量删除按钮是否可用

在这里插入图片描述
点击批量删除按钮进行批量删除
在这里插入图片描述
在这里插入图片描述

以下为页面显示效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

如有问题或者疑问请留言联系小编!!!!

感谢来访!!!

猜你喜欢

转载自blog.csdn.net/weixin_45582846/article/details/105957922