// 查看对账单详情 function onDetail(row: any) { // eslint-disable-next-line no-console console.log('父组件', row) data.value.formModeProps.id = row.id data.value.formModeProps.visible = true if (row.isCompleted !== '未回款') { data.value.disabled = true } else { data.value.disabled = false } }我需要在子组件调用这个方法,点击子组件表格一行的按钮,父组件来执行这个方法
时间: 2023-05-21 08:06:09 浏览: 107
你可以在子组件中使用$emit来触发父组件中的方法调用,比如这样:
// 子组件中
<template>
<el-table :data="tableData">
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleDetail(scope.row)">查看详情</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
methods: {
handleDetail(row) {
this.$emit('onDetail', row)
}
},
props: {
tableData: Array
}
}
</script>
// 父组件中
<template>
<ChildComponent :tableData="tableData" @onDetail="onDetail"></ChildComponent>
<!-- 其它内容 -->
</template>
<script>
export default {
methods: {
onDetail(row) {
console.log('父组件', row)
data.value.formModeProps.id = row.id
data.value.formModeProps.visible = true
if (row.isCompleted !== '未回款') {
data.value.disabled = true
} else {
data.value.disabled = false
}
}
},
data() {
return {
data: {} // 初始化
}
},
props: {
tableData: Array
}
}
</script>
阅读全文