vue3 v-model 绑定表单对象

• List item
  1.存在一个这么的需求，表格展开之后 可以编辑对应的表单，这里的helloword 就是需要的动态表单，根据这一行的类型或者其他判断要显示的哪个

  父组件

<template>
  <el-table :expand-row-keys="[123]" row-key="ids" :data="data">
    <el-table-column type="expand">
      <template #default="props">
        <HelloWorld v-model="props.row.obj" />
      template>
    el-table-column>
  el-table>

  <el-button @click="handleClick">131el-button>
template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import { ref } from "vue";
const data = ref([{ obj: {}, ids: 123 }]);
function handleClick() {
  console.log(data.value);
}
script>

2.子组件 helloword emit更新的时候 返回整个对象 而不是对象的某个属性

<template>
  <el-form
    v-if="formData"
    :value="formData"
    @input="($event) => handle($event, $emit)"
  >
    <el-form-item prop="name">
      <el-input v-model="formData.name">el-input>
    el-form-item>
    <el-form-item prop="text">
      <el-input v-model="formData.text">el-input>
    el-form-item>
  el-form>
template>

<script setup>
import { computed } from "vue";
const props = defineProps(["modelValue"]);
defineEmits(["update:modelValue"]);

const formData = computed(() => {
  return props.modelValue;
});
function handle($event, $emit) {
  $emit("update:modelValue", formData);
}
script>
<style lang="scss" scoped>style>