tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ♻️ cURD表单组件支持checkbox多选框

Browse Source
This commit is contained in:
cshaptx4869
2024-05-03 09:38:32 +08:00
parent ad8ccec26f
commit 563db933c0
3 changed files with 24 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/PageModal/index.vue
View File

@@ -30,7 +30,7 @@
<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 :label="option.label" :value="option.value" />
<el-option v-bind="option" />
</template>
</el-select>
</template>
@@ -38,10 +38,21 @@
<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 :label="option.label" :value="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
@@ -123,14 +134,20 @@ export interface IModalConfig<T = any> {
| "input"
| "select"
| "radio"
| "checkbox"
| "tree-select"
| "date-picker"
| "input-number"
| "custom";
// 组件属性
attrs?: IObject;
// 组件可选项(适用于select,radio组件)
options?: { label: string; value: any }[];
// 组件可选项(适用于select,radio,checkbox组件)
options?: Array<{
label: string;
value: any;
disabled?: boolean;
[key: string]: any;
}>;
// 插槽名(适用于组件类型为custom)
slotName?: string;
// 标签文本

4
src/typings/auto-imports.d.ts vendored
View File

@@ -325,14 +325,12 @@ declare module "vue" {
interface GlobalComponents {}
interface ComponentCustomProperties {
readonly EffectScope: UnwrapRef<(typeof import("vue"))["EffectScope"]>;
readonly ElForm: UnwrapRef<(typeof import("element-plus/es"))["ElForm"]>;
readonly ElMessage: UnwrapRef<
(typeof import("element-plus/es"))["ElMessage"]
>;
readonly ElMessageBox: UnwrapRef<
(typeof import("element-plus/es"))["ElMessageBox"]
>;
readonly ElTree: UnwrapRef<(typeof import("element-plus/es"))["ElTree"]>;
readonly acceptHMRUpdate: UnwrapRef<
(typeof import("pinia"))["acceptHMRUpdate"]
>;
@@ -1055,14 +1053,12 @@ declare module "@vue/runtime-core" {
interface GlobalComponents {}
interface ComponentCustomProperties {
readonly EffectScope: UnwrapRef<(typeof import("vue"))["EffectScope"]>;
readonly ElForm: UnwrapRef<(typeof import("element-plus/es"))["ElForm"]>;
readonly ElMessage: UnwrapRef<
(typeof import("element-plus/es"))["ElMessage"]
>;
readonly ElMessageBox: UnwrapRef<
(typeof import("element-plus/es"))["ElMessageBox"]
>;
readonly ElTree: UnwrapRef<(typeof import("element-plus/es"))["ElTree"]>;
readonly acceptHMRUpdate: UnwrapRef<
(typeof import("pinia"))["acceptHMRUpdate"]
>;

3
src/typings/components.d.ts vendored
View File

@@ -18,6 +18,8 @@ declare module "vue" {
ElBreadcrumbItem: (typeof import("element-plus/es"))["ElBreadcrumbItem"];
ElButton: (typeof import("element-plus/es"))["ElButton"];
ElCard: (typeof import("element-plus/es"))["ElCard"];
ElCheckbox: (typeof import("element-plus/es"))["ElCheckbox"];
ElCheckboxGroup: (typeof import("element-plus/es"))["ElCheckboxGroup"];
ElCol: (typeof import("element-plus/es"))["ElCol"];
ElColorPicker: (typeof import("element-plus/es"))["ElColorPicker"];
ElConfigProvider: (typeof import("element-plus/es"))["ElConfigProvider"];
@@ -32,6 +34,7 @@ declare module "vue" {
ElFormItem: (typeof import("element-plus/es"))["ElFormItem"];
ElIcon: (typeof import("element-plus/es"))["ElIcon"];
ElInput: (typeof import("element-plus/es"))["ElInput"];
ElInputNumber: (typeof import("element-plus/es"))["ElInputNumber"];
ElMenu: (typeof import("element-plus/es"))["ElMenu"];
ElMenuItem: (typeof import("element-plus/es"))["ElMenuItem"];
ElOption: (typeof import("element-plus/es"))["ElOption"];