基于element-plus定义表单配置化扩展表单按钮

---

前言

在后台管理系统一般都存在列表查询，且可输入数据进行查询

基于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>
    <FormList
      class="register-info-form"
      ref="userSearchFormRef"
      :fields="userSearchFormEntity.formFields"
      :formData="userSearchFormEntity.formData"
      :rules="userSearchFormEntity.formRules"
      labelWidth="120px"
    />
  </div>
</template>

<style scoped lang="less"></style>

---

总结

如有启发，可点赞收藏哟~