vue3 v-model 绑定表单对象
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">131</el-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>
更多推荐
所有评论(0)