vue组件获取props中的数据并绑定到form表单 el-form-item的v-model中方法

在vue的组件的form表单中, 我们可以直接使用props中传递的数据,如: <el-form-item label="姓名:">{{ value.real_name }} </el-form-item> 这里的value是通过props传递来的 const props = defineProps({value: {type: [Object, String],required: true} }) , 但是如果我们想要将props传递来的数据直接绑定到 表单的 formData.xxx 中, 这就需要借助 vue的生命周期函数onBeforeUpdate来将prpos的数据和formData中的数据进行绑定了.

这时如果在定义时直接使用 props中的值,如 const formData = reactive({status: props.value.status }) 这样是行不通的,因为这个props数据的传递时间是在组件被创建之后,在使用的时候才有的.

props数据绑定到form表单v-model示例代码

正确的做法是在数据更新之前我们在将props的数据和formData进行绑定, 示例代码如下:

<template>
 <el-form ref="formRef" :model="formData" >
    <el-form-item label="名称:">{{ value.name }} </el-form-item>
    <el-form-item label="状态" required prop="status">
        <el-radio-group v-model="formData.status">
            <el-radio
                v-for="(item, idx) in user_status"
                :key="idx"
                :value="parseInt(item.value)"
                >{{ item.name }}</el-radio>
        </el-radio-group>
    </el-form-item>
</el-form>

</template>

<script lang="ts" setup>

// 引入生命周期函数
import { onBeforeUpdate } from 'vue'

const props = defineProps({
    show: {
        type: Boolean,
        required: true
    },
    value: {
        type: [Object, String],
        required: true
    }
})

const formData = reactive({
    status: 0
})

// 注册一个钩子,在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
onBeforeUpdate(() => {
    if (props.value?.status !== undefined) {
        // 绑定props数据到formData
        formData.status = props.value?.status
    }
})


</script>

总结:vue中的props传递来的数据在form表单里面是可以直接显示的,但是如果需要绑定到formData表单数据中的话就需要借助vue的生命周期函数onBeforeUpdate在数据更新之前将props中的数据和formData进行绑定。

要默认获取当前行的id,可以在打开弹窗的时候,将当前行的id作为参数传递给弹窗组件,在弹窗组件使用props来接收这个id,然后在表单设置一个隐藏的input,将这个id赋值给这个input的value属性,这样就可以在提交表单时将这个id一起提交了。 具体的做法如下: 1. 在列表每一行的编辑按钮上绑定一个点击事件,将当前行的id作为参数传递给弹窗组件: ```html <template> <div> <el-table :data="list"> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column> <template slot-scope="scope"> <el-button type="primary" @click="openEditDialog(scope.row.id)">编辑</el-button> </template> </el-table-column> </el-table> <el-dialog title="编辑" :visible.sync="dialogVisible"> <edit-form :id="currentId" /> </el-dialog> </div> </template> <script> import EditForm from './EditForm.vue' export default { components: { EditForm }, data() { return { list: [], dialogVisible: false, currentId: null } }, methods: { openEditDialog(id) { this.currentId = id this.dialogVisible = true } } } </script> ``` 2. 在弹窗组件使用props接收id,并将其赋值给隐藏的input: ```html <template> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="ID" prop="id"> <el-input v-model="form.id" disabled></el-input> </el-form-item> <el-form-item label="姓名" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> </el-form> </template> <script> export default { props: { id: { type: Number, required: true } }, data() { return { form: { id: null, name: '' } } }, watch: { id(newVal) { this.form.id = newVal } }, mounted() { this.form.id = this.id } } </script> ``` 在弹窗组件,我们定义了一个form对象,其包含了id和name两个属性,我们将id设置为了null,并在mounted钩子函数将其赋值为从props接收到的id。同时,我们在watch也监听了id的变化,并在变化时将其赋值给form对象的id属性。 在表单,我们使用了el-input组件来展示id和name属性,并将其绑定form对象的对应属性上。其,id属性我们设置为了disabled,表示该input不可编辑。这样,我们就可以在弹窗默认获取到当前行的id了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值