vue+element-ui el-dialog嵌套table组件,ref问题,toggleRowSelection的undefined

项目需求,返回数据的时候,el-dialog弹窗里面的table组件需要设置默认选中。

vue+element-ui el-dialog嵌套table组件,ref问题,toggleRowSelection的undefined_第1张图片

要设置选中,则要调用table组件默认的toggleRowSelection(row,true)方法,true默认选中。

问题:el-diaglog组件里面的table组件时自定义的组件。


      
      
    

这时候要设置默认选中

1、在v-table组件里面设置selectCheck方法。





2、父组件传递选中的行的id给子组件,父子组件传值,大家都知道就不多说了。

selectRow: []

3、父组件调用自组件的方法,在子组件上设置ref

这里在父组件调用子组件的selectCheck()方法

this.$refs.elTable.selectCheck()

注意,因为table组件在dialog弹框里,所以为了避免dialog显示时dom还没有加载完成,所以要使用this.$nextTick()

点击显示弹框的方法里:

this.isDialog = true
this.$nextTick(() => {
        this.$refs.elTable.selectCheck()
 })

4、获取表格中选中的行

handleSelectionChange (val) {
      this.values= val
    },

 

你可能感兴趣的:(Vue,element-ui)