root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

主子表：暂时存储，参数校验-表单数据跑通

Browse Source 
(cherry picked from commit 86d9a97ccb)
This commit is contained in:
YunaiV 2023-11-10 08:51:01 +08:00 committed by shizhong
parent 980d546b06
commit c1d82098f9
2 changed files with 15 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/views/infra/demo02/DemoStudentContactForm.vue
View File

@ -1,12 +1,6 @@
<template> <template>
<el-table <el-table :data="formData" :stripe="true" class="-mt-10px">
:data="formData" <el-table-column label="序号" type="index" width="60" />
@selection-change="handleDemoStudentContactSelectionChange"
ref="demoStudentContactRef"
:stripe="true"
class="-mt-10px"
>
<el-table-column label="序号" type="index" width="100" />
<el-table-column label="名字" prop="name" width="300"> <el-table-column label="名字" prop="name" width="300">
<template #default="scope"> <template #default="scope">
<el-form-item label-width="0px" :inline-message="true" class="mb-0px!"> <el-form-item label-width="0px" :inline-message="true" class="mb-0px!">
@ -28,7 +22,9 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="60"> <el-table-column align="center" fixed="right" label="操作" width="60">
<el-button @click="handleAdd" link>—</el-button> <template #default="{ $index }">
<el-button @click="handleRemove($index)" link>—</el-button>
</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-row justify="center" class="mt-3"> <el-row justify="center" class="mt-3">
@ -53,12 +49,6 @@ const formRules = reactive({
mobile: [required] mobile: [required]
}) })
const handleDemoStudentContactSelectionChange = (val) => {
demoStudentContactList.value = val
}
const demoStudentContactRef = ref()
/** 新增按钮操作 */ /** 新增按钮操作 */
const emit = defineEmits(['update:formData']) const emit = defineEmits(['update:formData'])
const handleAdd = () => { const handleAdd = () => {
@ -71,9 +61,8 @@ const handleAdd = () => {
} }
/** 删除按钮操作 */ /** 删除按钮操作 */
const handleRemove = () => { const handleRemove = (index) => {
formData.push({ const formData = props.formData.filter((_, i) => i !== index)
name: '测试' emit('update:formData', formData)
})
} }
</script> </script>

14
src/views/infra/demo02/DemoStudentForm.vue
View File

@ -16,14 +16,14 @@
<el-form-item label="字段 3" prop="field3"> <el-form-item label="字段 3" prop="field3">
<el-input v-model="formData.field3" placeholder="请输入字段 3" /> <el-input v-model="formData.field3" placeholder="请输入字段 3" />
</el-form-item> </el-form-item>
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="联系人信息" name="first">
<DemoStudentContactForm v-model:form-data="formData.demoStudentContactList" />
</el-tab-pane>
<el-tab-pane label="地址信息" name="third">地址信息</el-tab-pane>
<el-tab-pane label="其它信息" name="fourth">其它信息</el-tab-pane>
</el-tabs>
</el-form> </el-form>
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="联系人信息" name="first">
<DemoStudentContactForm v-model:form-data="formData.demoStudentContactList" />
</el-tab-pane>
<el-tab-pane label="地址信息" name="third">地址信息</el-tab-pane>
<el-tab-pane label="其它信息" name="fourth">其它信息</el-tab-pane>
</el-tabs>
<template #footer> <template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button> <el-button @click="dialogVisible = false">取 消</el-button>