el-dialog嵌套了表格,点击表格中的每一列查看后展示抽屉详情,结果在过程中发现,首次点击打开后 再次点击不再打开。
解决如下:
父组件html
<div style="margin-top: 10px;">
<avue-crud :option="option">
<template slot-scope="{row}" slot="record" >
<span style="color: #1677ee" @click="getRowData(row)">查看</span>
</template>
</avue-crud>
<Drawer :visible="visible" @closeD="closeD"></Drawer>
</div>
父组件js
data() {
return {
visible:false
}
},
methods:{
//点击查看 弹出抽屉
getRowData(row) {
this.visible=!this.visible
},
//抽屉关闭后改变父组件的visible的值
closeD(v){
this.visible=v
}
}
子组件html
<el-drawer title="我是标题" size="400px" :visible.sync="visible" :before-close="handleClose" :modal-append-to-body="false" :append-to-body="true">
<span>我来啦!</span>
</el-drawer>
子组件js
methods: {
handleClose() {
this.$emit('closeD', false)
}
}
总结:
自定义事件:子组件抽屉关闭后 给父组件 visible赋值为false后,可以正常打开关闭。