function onDetail(row: any) { 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-23 20:01:43 浏览: 48
这段代码的作用是在子组件中设置表格的详细信息,其中参数 row 是行数据。在函数中,首先将表格数据的 id 更新到 data.value.formModeProps.id 中,然后将 data.value.formModeProps.visible 设置为 true,以进入详细信息模式。如果该行数据的状态为 "未回款",则将 data.value.disabled 设置为 false,否则将其设置为 true。最后,该函数会返回一个值,但是由于具体的使用场景不明确,我无法确定返回的值是什么。
相关问题
function handleDetail(row: any) { data.value.formModeProps.id = row.id data.value.formModeProps.visible = true if (row.isCompleted !== '未回款') { data.value.disabled = true } else { data.value.disabled = false } }这段代码是VUE3写在父组件的,子组件如何返回值给父组件这个方法进行处理
子组件可以通过 $emit 事件向父组件传递值,比如像这样:
在子组件中:
```
// 子组件中
methods: {
handleClick() {
const row = { id: 123, isCompleted: '未回款' }
this.$emit('updateDetail', row)
}
}
```
在父组件中:
```
// 父组件中
<template>
<div>
<button @click="showDetail">显示详情</button>
<child-component @updateDetail="handleDetail"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: { ChildComponent },
data() {
return {
data: {
value: {
formModeProps: {
id: '',
visible: false,
},
disabled: false,
},
},
}
},
methods: {
showDetail() {
const row = { id: 123, isCompleted: '未回款' }
this.handleDetail(row)
},
handleDetail(row) {
this.data.value.formModeProps.id = row.id
this.data.value.formModeProps.visible = true
if (row.isCompleted !== '未回款') {
this.data.value.disabled = true
} else {
this.data.value.disabled = false
}
},
},
}
</script>
```
当子组件中的 handleClick 方法被调用时,会通过 $emit 方法触发 updateDetail 事件,并将 row 对象作为参数传递给父组件中的 handleDetail 方法,从而实现了子组件向父组件传递值的功能。
// 查看对账单详情 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 } }我需要在子组件调用这个方法,点击子组件表格一行的按钮,父组件来执行这个方法
你可以在子组件中使用$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>
相关推荐
![ppt](https://img-home.csdnimg.cn/images/20210720083527.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)