主子表:确认列表编辑的支持组件情况

This commit is contained in:
YunaiV 2023-11-10 23:01:36 +08:00
parent 9f9e0f8bda
commit 55f6e4ca25
2 changed files with 66 additions and 4 deletions

View File

@ -144,6 +144,8 @@ watch(
} else if (isArray(props.modelValue)) { } else if (isArray(props.modelValue)) {
// 2 // 2
files.concat(props.modelValue) files.concat(props.modelValue)
} else if (props.modelValue === undefined) {
// 3undefined
} else { } else {
throw new Error('不支持的 modelValue 类型') throw new Error('不支持的 modelValue 类型')
} }

View File

@ -9,20 +9,73 @@
> >
<el-table :data="formData" class="-mt-10px"> <el-table :data="formData" class="-mt-10px">
<el-table-column label="序号" type="index" width="100" /> <el-table-column label="序号" type="index" width="100" />
<el-table-column label="名字" prop="name" width="300"> <el-table-column label="名字" prop="name" width="50">
<template #default="row"> <template #default="row">
<el-form-item class="mb-0px!"> <el-form-item class="mb-0px!">
<el-input v-model="row.name" placeholder="请输入名字" /> <el-input v-model="row.name" placeholder="请输入名字" />
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="手机号码"> <el-table-column label="手机号码" width="150">
<template #default="{ row, $index }"> <template #default="{ row, $index }">
<el-form-item :prop="`${$index}.mobile`" :rules="formRules.mobile" class="mb-0px!"> <el-form-item :prop="`${$index}.mobile`" :rules="formRules.mobile" class="mb-0px!">
<el-input type="number" placeholder="输入手机号码" v-model="row.mobile" /> <el-input type="number" placeholder="输入手机号码" v-model="row.mobile" />
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="类型" width="150">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.javaType`" :rules="formRules.javaType" class="mb-0px!">
<el-select v-model="row.javaType">
<el-option label="Long" value="Long" />
<el-option label="String" value="String" />
<el-option label="Integer" value="Integer" />
<el-option label="Double" value="Double" />
<el-option label="BigDecimal" value="BigDecimal" />
<el-option label="LocalDateTime" value="LocalDateTime" />
<el-option label="Boolean" value="Boolean" />
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="多选" width="150">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.sex`" :rules="formRules.sex" class="mb-0px!">
<el-checkbox-group v-model="row.sex">
<el-checkbox key="Long" label="Long">Long</el-checkbox>
<el-checkbox key="String" label="String">String</el-checkbox>
</el-checkbox-group>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="图片上传" width="200">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.pic`" :rules="formRules.pic" class="mb-0px!">
<UploadImg v-model="row.pic" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="文件上传" width="200">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.file`" :rules="formRules.file" class="mb-0px!">
<UploadFile v-model="row.file" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="大输入框" width="200">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.content`" :rules="formRules.content" class="mb-0px!">
<el-input v-model="row.content" type="textarea" placeholder="请输入 content" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="HTML" width="1024">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.html`" :rules="formRules.html" class="mb-0px!">
<Editor v-model="row.html" height="150px" />
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="60"> <el-table-column align="center" fixed="right" label="操作" width="60">
<template #default="{ $index }"> <template #default="{ $index }">
<el-button @click="handleDelete($index)" link></el-button> <el-button @click="handleDelete($index)" link></el-button>
@ -41,7 +94,10 @@ const props = defineProps<{
const formLoading = ref(false) // const formLoading = ref(false) //
const formData = ref([]) const formData = ref([])
const formRules = reactive({ const formRules = reactive({
mobile: [required] mobile: [required],
javaType: [required],
sex: [required],
pic: [required]
}) })
const formRef = ref() // Ref const formRef = ref() // Ref
@ -53,7 +109,11 @@ watch(
formData.value = [ formData.value = [
{ {
name: '芋艿', name: '芋艿',
mobile: '15601691300' mobile: '15601691300',
javaType: undefined,
sex: [],
pic: undefined,
file: undefined
} }
] ]
} else { } else {