Element: el-table 默认选中方法无效 tbl.$refs.roleTable.toggleRowSelection(tbl.rolesData[2],true);

Created on 25 Jan 2017  ·  9Comments  ·  Source: ElemeFE/element

ElementUI version

OS/Browers version

Vue version

Reproduction Link



Steps to reproduce

What is Expected?

What is actually happening?

Most helpful comment

我也遇到了这个问题。说一下我的解决办法
我是分页控件之后,重新查询一遍数据,然后在查询到数据之后就进行检查,进行toggleRowSelection。发现不行,调试了之后,发现this.$refs.table.selection 是记录勾选的对象的。在我获取到数据遍历的时候,这个数据是有值的(就是我曾经勾选的)。然后F8退出调试,再去检查这个对象,发现没有值了。

看一下vue的官方文档,$ref表示的DOM元素会在数据更新之后被注销新建。所以我认为是在我获取数据之后,就会进行$ref的新建。导致我们设置的勾选元素清空了。

通过updated 生命周期进行调试,发现正常。
代码如下:
updated:function(){ this.$nextTick(function(){ //遍历,设置toggleRowSelection方法 } }

All 9 comments

是不是选中了某个但是页面没有行被勾选上?应该是你第一个参数传的不对,注意第一个参数传的是row对象,不是索引

请参照楼上

就是不管用 不知道原因 获取完数据对象后执行toggleRowSelection没有效果,怎么实现默认勾选。。。。

我也遇到了,同求。。。

我也遇到了这个问题。说一下我的解决办法
我是分页控件之后,重新查询一遍数据,然后在查询到数据之后就进行检查,进行toggleRowSelection。发现不行,调试了之后,发现this.$refs.table.selection 是记录勾选的对象的。在我获取到数据遍历的时候,这个数据是有值的(就是我曾经勾选的)。然后F8退出调试,再去检查这个对象,发现没有值了。

看一下vue的官方文档,$ref表示的DOM元素会在数据更新之后被注销新建。所以我认为是在我获取数据之后,就会进行$ref的新建。导致我们设置的勾选元素清空了。

通过updated 生命周期进行调试,发现正常。
代码如下:
updated:function(){ this.$nextTick(function(){ //遍历,设置toggleRowSelection方法 } }

updated:function(){ this.$nextTick(function(){ //遍历,设置toggleRowSelection方法 } }
在这个生命周期里改动也并没有生效

updated:function(){ this.$nextTick(function(){ //遍历,设置toggleRowSelection方法 } }
在这个生命周期里改动也并没有生效

这里有个例子
https://jsfiddle.net/WongYAQi/j0L2ozea/1/

我也遇到了这个问题。说一下我的解决办法
我是分页控件之后,重新查询一遍数据,然后在查询到数据之后就进行检查,进行toggleRowSelection。发现不行,调试了之后,发现this.$refs.table.selection 是记录勾选的对象的。在我获取到数据遍历的时候,这个数据是有值的(就是我曾经勾选的)。然后F8退出调试,再去检查这个对象,发现没有值了。

看一下vue的官方文档,$ref表示的DOM元素会在数据更新之后被注销新建。所以我认为是在我获取数据之后,就会进行$ref的新建。导致我们设置的勾选元素清空了。

通过updated 生命周期进行调试,发现正常。
代码如下:
updated:function(){ this.$nextTick(function(){ //遍历,设置toggleRowSelection方法 } }

放在 update 生命周期里不是很好,会因为页面上的其他 update 导致 toggleRowSelection 不必要的调用,建议 watch 表格的数据,数据变动后调用 toggleRowSelection

updated:function(){ this.$nextTick(function(){ //遍历,设置toggleRowSelection方法 } }
在这个生命周期里改动也并没有生效

这里有个例子
https://jsfiddle.net/WongYAQi/j0L2ozea/1/

1313234234

Was this page helpful?
0 / 5 - 0 ratings