Merge pull request #156 from cshaptx4869/patch-102
feat(PageModal): ✨ 表单项增加col配置参数
This commit is contained in:
Ray Hao
@@ -6,79 +6,95 @@
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
>
|
||||
<template v-for="item in formItems" :key="item.prop">
|
||||
<el-form-item v-show="!item.hidden" :label="item.label" :prop="item.prop">
|
||||
<!-- Label -->
|
||||
<template #label v-if="item.tips">
|
||||
<span>
|
||||
{{ item.label }}
|
||||
<el-tooltip
|
||||
placement="bottom"
|
||||
effect="light"
|
||||
:content="item.tips"
|
||||
:raw-content="true"
|
||||
>
|
||||
<el-icon style="vertical-align: -0.15em" size="16">
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<!-- Input 输入框 -->
|
||||
<template v-if="item.type === 'input' || item.type === undefined">
|
||||
<el-input v-model="formData[item.prop]" v-bind="item.attrs" />
|
||||
</template>
|
||||
<!-- Select 选择器 -->
|
||||
<template v-else-if="item.type === 'select'">
|
||||
<el-select v-model="formData[item.prop]" v-bind="item.attrs">
|
||||
<template v-for="option in item.options" :key="option.value">
|
||||
<el-option v-bind="option" />
|
||||
<el-row :gutter="20">
|
||||
<template v-for="item in formItems" :key="item.prop">
|
||||
<el-col v-show="!item.hidden" v-bind="item.col">
|
||||
<el-form-item :label="item.label" :prop="item.prop">
|
||||
<!-- Label -->
|
||||
<template #label v-if="item.tips">
|
||||
<span>
|
||||
{{ item.label }}
|
||||
<el-tooltip
|
||||
placement="bottom"
|
||||
effect="light"
|
||||
:content="item.tips"
|
||||
:raw-content="true"
|
||||
>
|
||||
<el-icon style="vertical-align: -0.15em" size="16">
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
</el-select>
|
||||
</template>
|
||||
<!-- Radio 单选框 -->
|
||||
<template v-else-if="item.type === 'radio'">
|
||||
<el-radio-group v-model="formData[item.prop]" v-bind="item.attrs">
|
||||
<template v-for="option in item.options" :key="option.value">
|
||||
<el-radio v-bind="option" />
|
||||
<!-- Input 输入框 -->
|
||||
<template v-if="item.type === 'input' || item.type === undefined">
|
||||
<el-input v-model="formData[item.prop]" v-bind="item.attrs" />
|
||||
</template>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<!-- Checkbox 多选框 -->
|
||||
<template v-else-if="item.type === 'checkbox'">
|
||||
<el-checkbox-group v-model="formData[item.prop]" v-bind="item.attrs">
|
||||
<template v-for="option in item.options" :key="option.value">
|
||||
<el-checkbox v-bind="option" />
|
||||
<!-- Select 选择器 -->
|
||||
<template v-else-if="item.type === 'select'">
|
||||
<el-select v-model="formData[item.prop]" v-bind="item.attrs">
|
||||
<template v-for="option in item.options" :key="option.value">
|
||||
<el-option v-bind="option" />
|
||||
</template>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<!-- Input Number 数字输入框 -->
|
||||
<template v-else-if="item.type === 'input-number'">
|
||||
<el-input-number v-model="formData[item.prop]" v-bind="item.attrs" />
|
||||
</template>
|
||||
<!-- TreeSelect 树形选择 -->
|
||||
<template v-else-if="item.type === 'tree-select'">
|
||||
<el-tree-select v-model="formData[item.prop]" v-bind="item.attrs" />
|
||||
</template>
|
||||
<!-- DatePicker 日期选择器 -->
|
||||
<template v-else-if="item.type === 'date-picker'">
|
||||
<el-date-picker v-model="formData[item.prop]" v-bind="item.attrs" />
|
||||
</template>
|
||||
<!-- Text 文本 -->
|
||||
<template v-else-if="item.type === 'text'">
|
||||
<el-text v-bind="item.attrs">{{ formData[item.prop] }}</el-text>
|
||||
</template>
|
||||
<!-- 自定义 -->
|
||||
<template v-else-if="item.type === 'custom'">
|
||||
<slot
|
||||
:name="item.slotName ?? item.prop"
|
||||
:prop="item.prop"
|
||||
:formData="formData"
|
||||
:attrs="item.attrs"
|
||||
></slot>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<!-- Radio 单选框 -->
|
||||
<template v-else-if="item.type === 'radio'">
|
||||
<el-radio-group v-model="formData[item.prop]" v-bind="item.attrs">
|
||||
<template v-for="option in item.options" :key="option.value">
|
||||
<el-radio v-bind="option" />
|
||||
</template>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<!-- Checkbox 多选框 -->
|
||||
<template v-else-if="item.type === 'checkbox'">
|
||||
<el-checkbox-group
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
>
|
||||
<template v-for="option in item.options" :key="option.value">
|
||||
<el-checkbox v-bind="option" />
|
||||
</template>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<!-- Input Number 数字输入框 -->
|
||||
<template v-else-if="item.type === 'input-number'">
|
||||
<el-input-number
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
/>
|
||||
</template>
|
||||
<!-- TreeSelect 树形选择 -->
|
||||
<template v-else-if="item.type === 'tree-select'">
|
||||
<el-tree-select
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
/>
|
||||
</template>
|
||||
<!-- DatePicker 日期选择器 -->
|
||||
<template v-else-if="item.type === 'date-picker'">
|
||||
<el-date-picker
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
/>
|
||||
</template>
|
||||
<!-- Text 文本 -->
|
||||
<template v-else-if="item.type === 'text'">
|
||||
<el-text v-bind="item.attrs">{{ formData[item.prop] }}</el-text>
|
||||
</template>
|
||||
<!-- 自定义 -->
|
||||
<template v-else-if="item.type === 'custom'">
|
||||
<slot
|
||||
:name="item.slotName ?? item.prop"
|
||||
:prop="item.prop"
|
||||
:formData="formData"
|
||||
:attrs="item.attrs"
|
||||
></slot>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -15,96 +15,111 @@
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
>
|
||||
<template v-for="item in formItems" :key="item.prop">
|
||||
<el-form-item
|
||||
v-show="!item.hidden"
|
||||
:label="item.label"
|
||||
:prop="item.prop"
|
||||
>
|
||||
<!-- Label -->
|
||||
<template #label v-if="item.tips">
|
||||
<span>
|
||||
{{ item.label }}
|
||||
<el-tooltip
|
||||
placement="bottom"
|
||||
effect="light"
|
||||
:content="item.tips"
|
||||
:raw-content="true"
|
||||
<el-row :gutter="20">
|
||||
<template v-for="item in formItems" :key="item.prop">
|
||||
<el-col v-show="!item.hidden" v-bind="item.col">
|
||||
<el-form-item :label="item.label" :prop="item.prop">
|
||||
<!-- Label -->
|
||||
<template #label v-if="item.tips">
|
||||
<span>
|
||||
{{ item.label }}
|
||||
<el-tooltip
|
||||
placement="bottom"
|
||||
effect="light"
|
||||
:content="item.tips"
|
||||
:raw-content="true"
|
||||
>
|
||||
<el-icon style="vertical-align: -0.15em" size="16">
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<!-- Input 输入框 -->
|
||||
<template
|
||||
v-if="item.type === 'input' || item.type === undefined"
|
||||
>
|
||||
<el-icon style="vertical-align: -0.15em" size="16">
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<!-- Input 输入框 -->
|
||||
<template v-if="item.type === 'input' || item.type === undefined">
|
||||
<el-input v-model="formData[item.prop]" v-bind="item.attrs" />
|
||||
</template>
|
||||
<!-- Select 选择器 -->
|
||||
<template v-else-if="item.type === 'select'">
|
||||
<el-select v-model="formData[item.prop]" v-bind="item.attrs">
|
||||
<template v-for="option in item.options" :key="option.value">
|
||||
<el-option v-bind="option" />
|
||||
<el-input v-model="formData[item.prop]" v-bind="item.attrs" />
|
||||
</template>
|
||||
</el-select>
|
||||
</template>
|
||||
<!-- Radio 单选框 -->
|
||||
<template v-else-if="item.type === 'radio'">
|
||||
<el-radio-group v-model="formData[item.prop]" v-bind="item.attrs">
|
||||
<template v-for="option in item.options" :key="option.value">
|
||||
<el-radio v-bind="option" />
|
||||
<!-- Select 选择器 -->
|
||||
<template v-else-if="item.type === 'select'">
|
||||
<el-select v-model="formData[item.prop]" v-bind="item.attrs">
|
||||
<template
|
||||
v-for="option in item.options"
|
||||
:key="option.value"
|
||||
>
|
||||
<el-option v-bind="option" />
|
||||
</template>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<!-- Checkbox 多选框 -->
|
||||
<template v-else-if="item.type === 'checkbox'">
|
||||
<el-checkbox-group
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
>
|
||||
<template v-for="option in item.options" :key="option.value">
|
||||
<el-checkbox v-bind="option" />
|
||||
<!-- Radio 单选框 -->
|
||||
<template v-else-if="item.type === 'radio'">
|
||||
<el-radio-group
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
>
|
||||
<template
|
||||
v-for="option in item.options"
|
||||
:key="option.value"
|
||||
>
|
||||
<el-radio v-bind="option" />
|
||||
</template>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<!-- Input Number 数字输入框 -->
|
||||
<template v-else-if="item.type === 'input-number'">
|
||||
<el-input-number
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
/>
|
||||
</template>
|
||||
<!-- TreeSelect 树形选择 -->
|
||||
<template v-else-if="item.type === 'tree-select'">
|
||||
<el-tree-select
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
/>
|
||||
</template>
|
||||
<!-- DatePicker 日期选择器 -->
|
||||
<template v-else-if="item.type === 'date-picker'">
|
||||
<el-date-picker
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
/>
|
||||
</template>
|
||||
<!-- Text 文本 -->
|
||||
<template v-else-if="item.type === 'text'">
|
||||
<el-text v-bind="item.attrs">{{ formData[item.prop] }}</el-text>
|
||||
</template>
|
||||
<!-- 自定义 -->
|
||||
<template v-else-if="item.type === 'custom'">
|
||||
<slot
|
||||
:name="item.slotName ?? item.prop"
|
||||
:prop="item.prop"
|
||||
:formData="formData"
|
||||
:attrs="item.attrs"
|
||||
>
|
||||
</slot>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<!-- Checkbox 多选框 -->
|
||||
<template v-else-if="item.type === 'checkbox'">
|
||||
<el-checkbox-group
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
>
|
||||
<template
|
||||
v-for="option in item.options"
|
||||
:key="option.value"
|
||||
>
|
||||
<el-checkbox v-bind="option" />
|
||||
</template>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<!-- Input Number 数字输入框 -->
|
||||
<template v-else-if="item.type === 'input-number'">
|
||||
<el-input-number
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
/>
|
||||
</template>
|
||||
<!-- TreeSelect 树形选择 -->
|
||||
<template v-else-if="item.type === 'tree-select'">
|
||||
<el-tree-select
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
/>
|
||||
</template>
|
||||
<!-- DatePicker 日期选择器 -->
|
||||
<template v-else-if="item.type === 'date-picker'">
|
||||
<el-date-picker
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
/>
|
||||
</template>
|
||||
<!-- Text 文本 -->
|
||||
<template v-else-if="item.type === 'text'">
|
||||
<el-text v-bind="item.attrs">
|
||||
{{ formData[item.prop] }}
|
||||
</el-text>
|
||||
</template>
|
||||
<!-- 自定义 -->
|
||||
<template v-else-if="item.type === 'custom'">
|
||||
<slot
|
||||
:name="item.slotName ?? item.prop"
|
||||
:prop="item.prop"
|
||||
:formData="formData"
|
||||
:attrs="item.attrs"
|
||||
></slot>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<!-- 弹窗底部操作按钮 -->
|
||||
<template #footer>
|
||||
@@ -137,99 +152,117 @@
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
>
|
||||
<template v-for="item in formItems" :key="item.prop">
|
||||
<el-form-item
|
||||
v-show="!item.hidden"
|
||||
:label="item.label"
|
||||
:prop="item.prop"
|
||||
>
|
||||
<!-- Label -->
|
||||
<template #label v-if="item.tips">
|
||||
<span>
|
||||
{{ item.label }}
|
||||
<el-tooltip
|
||||
placement="bottom"
|
||||
effect="light"
|
||||
:content="item.tips"
|
||||
:raw-content="true"
|
||||
<el-row :gutter="20">
|
||||
<template v-for="item in formItems" :key="item.prop">
|
||||
<el-col v-show="!item.hidden" v-bind="item.col">
|
||||
<el-form-item :label="item.label" :prop="item.prop">
|
||||
<!-- Label -->
|
||||
<template #label v-if="item.tips">
|
||||
<span>
|
||||
{{ item.label }}
|
||||
<el-tooltip
|
||||
placement="bottom"
|
||||
effect="light"
|
||||
:content="item.tips"
|
||||
:raw-content="true"
|
||||
>
|
||||
<el-icon style="vertical-align: -0.15em" size="16">
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<!-- Input 输入框 -->
|
||||
<template
|
||||
v-if="item.type === 'input' || item.type === undefined"
|
||||
>
|
||||
<el-icon style="vertical-align: -0.15em" size="16">
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<!-- Input 输入框 -->
|
||||
<template v-if="item.type === 'input' || item.type === undefined">
|
||||
<el-input v-model="formData[item.prop]" v-bind="item.attrs" />
|
||||
</template>
|
||||
<!-- Select 选择器 -->
|
||||
<template v-else-if="item.type === 'select'">
|
||||
<el-select v-model="formData[item.prop]" v-bind="item.attrs">
|
||||
<template v-for="option in item.options" :key="option.value">
|
||||
<el-option v-bind="option" />
|
||||
<el-input
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
/>
|
||||
</template>
|
||||
</el-select>
|
||||
</template>
|
||||
<!-- Radio 单选框 -->
|
||||
<template v-else-if="item.type === 'radio'">
|
||||
<el-radio-group
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
>
|
||||
<template v-for="option in item.options" :key="option.value">
|
||||
<el-radio v-bind="option" />
|
||||
<!-- Select 选择器 -->
|
||||
<template v-else-if="item.type === 'select'">
|
||||
<el-select
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
>
|
||||
<template
|
||||
v-for="option in item.options"
|
||||
:key="option.value"
|
||||
>
|
||||
<el-option v-bind="option" />
|
||||
</template>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<!-- Checkbox 多选框 -->
|
||||
<template v-else-if="item.type === 'checkbox'">
|
||||
<el-checkbox-group
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
>
|
||||
<template v-for="option in item.options" :key="option.value">
|
||||
<el-checkbox v-bind="option" />
|
||||
<!-- Radio 单选框 -->
|
||||
<template v-else-if="item.type === 'radio'">
|
||||
<el-radio-group
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
>
|
||||
<template
|
||||
v-for="option in item.options"
|
||||
:key="option.value"
|
||||
>
|
||||
<el-radio v-bind="option" />
|
||||
</template>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<!-- Input Number 数字输入框 -->
|
||||
<template v-else-if="item.type === 'input-number'">
|
||||
<el-input-number
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
/>
|
||||
</template>
|
||||
<!-- TreeSelect 树形选择 -->
|
||||
<template v-else-if="item.type === 'tree-select'">
|
||||
<el-tree-select
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
/>
|
||||
</template>
|
||||
<!-- DatePicker 日期选择器 -->
|
||||
<template v-else-if="item.type === 'date-picker'">
|
||||
<el-date-picker
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
/>
|
||||
</template>
|
||||
<!-- Text 文本 -->
|
||||
<template v-else-if="item.type === 'text'">
|
||||
<el-text v-bind="item.attrs">{{ formData[item.prop] }}</el-text>
|
||||
</template>
|
||||
<!-- 自定义 -->
|
||||
<template v-else-if="item.type === 'custom'">
|
||||
<slot
|
||||
:name="item.slotName ?? item.prop"
|
||||
:prop="item.prop"
|
||||
:formData="formData"
|
||||
:attrs="item.attrs"
|
||||
>
|
||||
</slot>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<!-- Checkbox 多选框 -->
|
||||
<template v-else-if="item.type === 'checkbox'">
|
||||
<el-checkbox-group
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
>
|
||||
<template
|
||||
v-for="option in item.options"
|
||||
:key="option.value"
|
||||
>
|
||||
<el-checkbox v-bind="option" />
|
||||
</template>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
<!-- Input Number 数字输入框 -->
|
||||
<template v-else-if="item.type === 'input-number'">
|
||||
<el-input-number
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
/>
|
||||
</template>
|
||||
<!-- TreeSelect 树形选择 -->
|
||||
<template v-else-if="item.type === 'tree-select'">
|
||||
<el-tree-select
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
/>
|
||||
</template>
|
||||
<!-- DatePicker 日期选择器 -->
|
||||
<template v-else-if="item.type === 'date-picker'">
|
||||
<el-date-picker
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
/>
|
||||
</template>
|
||||
<!-- Text 文本 -->
|
||||
<template v-else-if="item.type === 'text'">
|
||||
<el-text v-bind="item.attrs">
|
||||
{{ formData[item.prop] }}
|
||||
</el-text>
|
||||
</template>
|
||||
<!-- 自定义 -->
|
||||
<template v-else-if="item.type === 'custom'">
|
||||
<slot
|
||||
:name="item.slotName ?? item.prop"
|
||||
:prop="item.prop"
|
||||
:formData="formData"
|
||||
:attrs="item.attrs"
|
||||
></slot>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</template>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
<!-- 弹窗底部操作按钮 -->
|
||||
|
||||
@@ -5,6 +5,7 @@ import type {
|
||||
FormProps,
|
||||
PaginationProps,
|
||||
TableProps,
|
||||
ColProps,
|
||||
} from "element-plus";
|
||||
import PageContent from "./PageContent.vue";
|
||||
import PageForm from "./PageForm.vue";
|
||||
@@ -248,6 +249,8 @@ export type IFormItems<T = any> = Array<{
|
||||
initialValue?: any;
|
||||
// 是否隐藏
|
||||
hidden?: boolean;
|
||||
// layout组件Col属性
|
||||
col?: Partial<ColProps>;
|
||||
// 监听函数
|
||||
watch?: (newValue: any, oldValue: any, data: T, items: IObject[]) => void;
|
||||
// 计算属性函数
|
||||
|
||||
Reference in New Issue
Block a user