---

前言

在后臺管理系統一般都存在列表查詢，且可輸入數據進行查詢

基于element-plus定義表單配置化

新增按鈕配置化

---

一、新增btn.vue組件

<template><template v-for="(btn, index) in fieldProperty.btns" :key="btn + index"><el-button@click="btn.fun":size="fieldProperty.size":name="btn.name":readonly="btn.readonly":disabled="btn.disabled":type="btn.type":color="btn.color":dark="btn.dark":plain="btn.plain":round="btn.round":circle="btn.circle"><SvgIcon v-if="btn.icon" :icon-class="btn.icon"/>{{ btn.name }}</el-button></template>
</template>
<script lang="ts">
import { computed, reactive } from "vue";
import SvgIcon from "@/components/svg-icon/index.vue";
export default {components: { SvgIcon },name: "Radio",props: {modelvalue: [Boolean],property: {type: Object,default() {return {};},},},setup(props, { emit }) {const fieldProperty = reactive({size: "default", // 'large' | 'default' | 'small'btns: [{fun: () => { console.log('Save') },name: 'Save',readonly: false,disabled: false,type: "primary", // 'primary'| 'success'| 'warning'| 'danger'| 'info'| 'text'(delete)color: "#334343",icon: 'save', // 圖標dark: false, // dark 模式, 意味著自動設置 color 為 dark 模式的顏色 和color一起設置plain: false, // 是否為樸素按鈕round: false, // 是否為圓角按鈕circle: true, // 是否為圓形按鈕// loading: false, // 是否為加載中狀態// 'loading-icon': 'Loading', // 自定義加載中狀態圖標組件}],...props.property,});const val = computed({get() {return props.modelvalue;},set(val) {emit("update:modelvalue", val); // 觸發},});return {val,fieldProperty,};},
};
</script>
<style lang="less" scoped></style>

• form.vue新增btn組件引入

import Btn from "@/components/form-configuration/btn.vue";
export default {components: {...Btn},
}

二、使用

• entity.ts

import { ObjectEntries } from "@/entity/objectentries";
import enableStatus from "@/enum/enable-status";
import type { Rules, DefaultFields, FormData } from "@/interface/form";
import { useI18n } from "vue-i18n";
export class UserSearchFormEntity extends ObjectEntries {public formRules: Rules = {};public formFields: DefaultFields = {};public formData: FormData = {};constructor() {const { t } = useI18n()super()this.formFields = {userName: "",nickName: "",phoneNumber: "",status: "",createDate: [],};this.formData = {userName: {type: "Input",colSize: 8,show: true,class: [],title: t('userName'),field: "userName",property: {type: "text",placeholder: "text",},},nickName: {type: "Input",colSize: 8,show: true,class: [],title: t('nickName'),field: "nickName",property: {type: "text",placeholder: "text",},},phoneNumber: {type: "Input",colSize: 8,show: true,class: [],title: t('phoneNumber'),field: "phoneNumber",property: {type: "text",placeholder: "text",},},status: {type: "Select",colSize: 8,show: true,class: [],title: t('status'),field: "status",property: {data: UserSearchFormEntity.objectEntries(enableStatus),},},createDate: {type: "Date",colSize: 8,show: true,class: [],title: t('createDate'),field: "createDate",property: {type: "daterange",placeholder: "text",},},btn: {type: "Btn",colSize: 8,show: true,class: ['noLabel'],field: "btn",property: {btns: []},},};}
}

• page/index.ts

import { defineComponent, reactive, ref } from 'vue'
import FormList from "@/components/form-configuration/form.vue";
import { UserSearchFormEntity } from './composables/entity';
import { useI18n } from 'vue-i18n';export default defineComponent({components: {FormList},setup() {const { t } = useI18n()const userSearchFormRef = ref()const userSearchFormEntity = reactive(new UserSearchFormEntity())userSearchFormEntity.formData.btn.property.btns = [{fun: () => {},name: t('search'),type: 'primary',icon: 'search'},{fun: () => {},name: t('reset'),icon: 'refresh',},]return {userSearchFormRef,userSearchFormEntity};},
});

• page/index.vue

<script lang="ts" src="./index.ts" />
<template><div><FormListclass="register-info-form"ref="userSearchFormRef":fields="userSearchFormEntity.formFields":formData="userSearchFormEntity.formData":rules="userSearchFormEntity.formRules"labelWidth="120px"/></div>
</template><style scoped lang="less"></style>

---

總結

如有啟發，可點贊收藏喲~