Vue Element ui 弹窗中table默认选中

原创 Sakura 随笔 Vue 206阅读 2018-06-28 17:46:36 举报

有段时间没有来总结笔记了,今天抓紧一切时间,来总结一个小问题
使用 Vue+elementui搭建的管理平台,用到表格多选时的问题
官网中有一个切换table默认选中状态的demo
如有需要请点击查看:http://element-cn.eleme.io/#/zh-CN/component/table
简单的说一下我遇到的问题:
1、点击按钮时,动态获取弹窗中表格的数据,并且显示已经选中的第几行的数据
html内容

vue部分:

如果直接按照上面的代码运行,会有一个报错信息,
Error in mounted hook: "TypeError: Cannot read property 'clearSelection' of undefined"
提示 clearSelection 方法未定义,此方法是用来清空表格选中的
或者
Error in mounted hook: "TypeError: rows.forEach is not a function"
为什么会报错呢?一开始不太清楚,经过百度搜索后,才知道,
原来,写在弹窗中的表格由于是动态加载的,所以获取不到表格的
this.$refs.multipleTable
所以,在调用表格的toggleRowSelection方法时,会产生报错,因此,解决办法,就是放在vue的延迟回调里面,也就是vue的
Vue.nextTick()里面,这样多了一个延迟回调,表格的默认选中就好使了

注意:
默认选中时,要注意是传入的数组,还是单个的一个对象,如果是数组,里面需要循环,如果单个的对象,则需要把循环去掉
demo如下:

评论 ( 1 )
最新评论
lawrence 2018-07-18 12:18:12 1F

为何不传个效果截图?