vue+element-ui el-dialog嵌套table组件,ref问题,toggleRowSelection的undefined
项目需求,返回数据的时候,el-dialog弹窗里面的table组件需要设置默认选中。要设置选中,则要调用table组件默认的toggleRowSelection(row,true)方法,true默认选中。问题:el-diaglog组件里面的table组件时自定义的组件。<el-dialog title="选择用户":width="dialo...
·
项目需求,返回数据的时候,el-dialog弹窗里面的table组件需要设置默认选中。
要设置选中,则要调用table组件默认的toggleRowSelection(row,true)方法,true默认选中。
问题:el-diaglog组件里面的table组件时自定义的组件。
<el-dialog title="选择用户"
:width="dialogWidth"
v-if="isDialog"
:visible.sync="isDialog">
<v-table ref="elTable"
:data="resultData"
:columns="columns"
:checkbox="checkbox"
:selectRow="selectRow"
loading
@handleCurrentChange="handleCurrentChange"
@handleSelectionChange="handleSelectionChange">
</v-table>
</el-dialog>
这时候要设置默认选中
1、在v-table组件里面设置selectCheck方法。
<template>
<div class="table-container">
<el-table border
ref="multipleTable"
:data="data.records"
v-loading='$store.state.tableLoading'
@selection-change="handleSelectionChange">
<el-table-column fixed
v-if="checkbox"
type="selection"
align="center"
width="50">
</el-table-column>
<template v-for="(item, index) in columns">
<slot :name='item.slot'
v-if='item.slot' />
<component v-else-if="item.component"
:is="item.component"
:column="item"
:key="index" />
<el-table-column :key="index"
v-bind="item"
v-else
align="center" />
</template>
</el-table>
</div>
</template>
<script>
export default {
name: 'v-table',
props: {
loading: {
type: Boolean,
default: false
},
checkbox: {
type: Boolean,
default: false
},
data: { // 父组件传递过来的table数据
type: [Object, Array],
default: () => { }
},
columns: {
type: Array,
default: () => []
},
height: {
type: [String, Number],
default: 0
},
selectRow: { //父组件传递过来的要选中的行的id
type: Array,
default: null
}
},
data () {
return {
}
},
created () {
},
mounted () {
},
methods: {
selectCheck () {
this.data.records.forEach(item => {
for (let i in this.selectRow) {
if (item.id === this.selectRow[i]) {
this.$refs.multipleTable.toggleRowSelection(item, true)
}
}
})
},
handleSelectionChange (val) {
this.$emit('handleSelectionChange', val)
}
}
}
</script>
<style lang="scss" scoped>
</style>
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
},
更多推荐
已为社区贡献5条内容
所有评论(0)