基于elementplus的弹窗嵌套表单进行二次封装
所见即所得：简单封装方便工作
ProForm.vue代码：
<!--
* @Author: 忆往昔
* @LastEditTime: 2024-01-6 14:36:00
* @email: 15871856064@163.com
-->
<template>
<div class="penk-form-container">
<el-dialog
v-model="visible1"
:fullscreen="props.fullscreen"
:draggable="props.draggable"
:title="props.title"
:width="props.width || '50%'"
>
<el-form
ref="ruleFormRef"
label-width="120px"
size="large"
:model="form"
:rules="props.formConfig.rules"
>
<template v-for="item in props.formConfig.formItemConfig" :key="item.prop">
<el-form-item
:label="item.label + '：'"
:style="{ display: item.hidden == true ? 'none' : '' }"
:prop="item.prop"
>
<!-- 输入框 -->
<el-input
v-if="item.type == 'input'"
v-model="form[item.prop]"
:placeholder="item.placeholder || ''"
:clearable="item.clearable"
:disabled="item.disabled"
:type="item.inputType"
:row="item.row"
:style="{ width: item.width + 'px' }"
/>
<!-- 下拉框 -->
<el-select
v-else-if="item.type == 'select'"
v-model="form[item.prop]"
:placeholder="item.placeholder"
:clearable="item.clearable"
:disabled="item.disabled"
:style="{ width: item.width + 'px' }"
>
<el-option
v-for="option in item.data"
:key="option.value"
:label="option.label"
:value="option.value"
:disabled="option.disabled"
/>
</el-select>
<!-- 多选框 -->
<el-checkbox-group
v-else-if="item.type == 'checkbox'"
v-model="form[item.prop]"
:placeholder="item.placeholder"
:clearable="item.clearable"
:disabled="item.disabled"
:style="{ width: item.width + 'px' }"
>
<el-checkbox
v-for="option in item.data"
:key="option.value"
:label="option.value"
:disabled="option.disabled"
>{{ option.label }}</el-checkbox
>
</el-checkbox-group>
<!-- 单选框 -->
<el-radio-group
v-else-if="item.type == 'radio'"
v-model="form[item.prop]"
:placeholder="item.placeholder"
:clearable="item.clearable"
:disabled="item.disabled"
:style="{ width: item.width + 'px' }"
>
<el-radio
:label="option.value"
size="large"
v-for="option in item.data"
:key="option.label"
>{{ option.label }}</el-radio
>
</el-radio-group>
</el-form-item>
</template>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="visible1 = false">取消</el-button>
<el-button type="primary" @click="confirm(ruleFormRef)"> 确定 </el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, watch, defineEmits, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
let form = reactive({})
const visible1 = ref(true)
const ruleFormRef = ref()
const props = defineProps({
formData: {
type: Object,
default: () => {}
},
formConfig: {
type: Object,
default: () => {}
},
visible: {
type: Boolean,
default: false
},
width: {
type: String,
default: '520px'
},
title: {
type: String,
default: '新增'
},
fullscreen: {
type: Boolean,
default: false
},
draggable: {
type: Boolean,
default: false
},
'append-to-body': {
type: Boolean,
default: false
},
'close-on-click-modal': {
type: Boolean,
default: false
}
})
// 生成事件对象，数组中就是对象名
const emit = defineEmits(['update:visible', 'confirm'])
// 监听父组件的visible，用来简介控制el-dialog的弹框开关，一般是用于开
watch(
() => props.visible,
(n, o) => {
visible1.value = n
}
)
// 监听el-dialog显示状态，再通过@update:visible 通知父组件，一般是用于关
watch(visible1, (n, o) => {
emit('update:visible', n)
})
// 每次触发，就证明父组件点了修改或者添加的按钮，传递了一个新的formData
// 需要重新给form 赋值，并且，对该表单项进行重置
watch(
() => props.formData,
(n, o) => {
resetForm(ruleFormRef.value)
form = reactive(n)
}
)
// 确定按钮触发
const confirm = async (formEl) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
emit('confirm', form)
} else {
console.log('error submit!', fields)
ElMessage({
showClose: true,
message: '请完善表单信息！',
type: 'error'
})
}
})
}
// 重置表单
const resetForm = (formEl) => {
if (!formEl) return
formEl.resetFields()
}
onMounted(() => {
console.log(props.formConfig);
// 初始化 配置弹框是否可显示
visible1.value = props.visible
// 初始化 配置formData
props.formConfig.formItemConfig.map((item) => {
form[item.prop] = ''
})
})
</script>
<style lang="scss" scoped>
.penk-form-container {
.el-table-border {
border: 1px #eee solid;
}
:deep(.el-dialog__body) {
border-top: 1px solid #eee;
}
}
</style>
组件使用示例：
<template>
<MyTable
:tableData="tableData"
:columns="columns"
:total="total"
:currentPage="listQuery.pageNo"
:pageSize="listQuery.pageSize"
@changeTableData="changeTableData"
>
<!-- <template #check="{ slotProps }">
<el-tag class="ml-2" :type="slotProps.check ? 'success' : 'danger'">
{{ checkFilter(slotProps.check) }}
</el-tag>
</template> -->
<template #operator="{ slotProps }">
<el-button type="primary" @click="setData('edit', slotProps)">编辑</el-button>
<el-button type="primary" @click="handleAddItem">新增</el-button>
<el-button type="primary" @click="handleEditItem(slotProps)">修改</el-button>
<el-button type="danger" @click="handleDel(slotProps)">删除</el-button>
</template>
</MyTable>
<!-- 表单弹框 -->
<ProForm
:title="title"
:formConfig="formConfig"
:formData="formData"
v-model:visible="visible"
append-to-body
@confirm="saveItem"
/>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import MyTable from '@/components/MyTable/MyTable.vue'
import ProForm from '@/components/ProForm/ProForm.vue'
let listQuery = ref({
pageNo: 1,
pageSize: 10
})
const tableData = ref([
{ number: '001', numberplate: '京A12345', date: '2022-01-01', check: '正常', operator: '编辑' },
{ number: '002', numberplate: '京B67890', date: '2022-02-01', check: '正常', operator: '编辑' },
{ number: '003', numberplate: '京C24680', date: '2022-03-01', check: '故障', operator: '编辑' },
{ number: '004', numberplate: '京D13579', date: '2022-04-01', check: '正常', operator: '编辑' },
{ number: '005', numberplate: '京E97531', date: '2022-05-01', check: '正常', operator: '编辑' }
])
let total = ref(0)
/**
* prop:数据项列名
* label:列名展示名
* fixed:固定列 true/right/left
* width:列宽
* show-overflow-tooltip
* type:对应列的类型 selection / index / expand
* sortable:true/false
* selectable:Function
* formatter:格式化内容 function(row, column, cellValue, index)
**/
let columns = ref([
{ prop: 'number', label: '车牌自编号' },
{ prop: 'numberplate', label: '车牌号' },
{ prop: 'date', label: '出厂日期' },
{ prop: 'check', label: '车辆状态' },
{ prop: 'operator', label: '操作', fixed: 'right' }
])
onMounted(() => {})
const changeTableData = (pageNum, pageSize) => {
listQuery.value.pageNo = pageNum
listQuery.value.pageSize = pageSize
getCarList()
}
const visible = ref(false) // 控制弹窗开关
const title = ref('') // 弹窗标题
const formData = ref({}) // 表单数据
// 表单配置项
const formConfig = {
formItemConfig: [
{
label: '类型名',
prop: 'typeName',
type: 'input'
},
{
label: '父级类型名',
prop: 'parentId',
type: 'select',
data: []
}
],
rules: {
typeName: [
{
required: true,
message: '请输入类型名',
trigger: 'blur'
}
]
}
}
// 添加数据按钮
const handleAddItem = () => {
visible.value = true
title.value = '新增'
formData.value = {}
}
// 修改数据按钮
const handleEditItem = (row) => {
visible.value = true
title.value = '修改'
formData.value = row
}
// 表单提交
const saveItem = (form) => {
console.log('提交', form)
}
</script>
