表单按钮自定义，简单表格

src/components/common-form/index.vue

@@ -3,6 +3,17 @@ import { computed, ref } from 'vue'
 import cloneDeep from 'lodash/cloneDeep'
 import { $i18nBundle } from '@/messages'
 
+/**
+ * @typedef {FormProps} CommonFormProps
+ * @property {[CommonFormOption]} options 配置选项
+ * @property {boolean} showButtons 是否显示按钮区域
+ * @property {boolean} showSubmit 是否显示提交按钮
+ * @property {boolean} showReset 是否显示重置按钮
+ * @method submitForm 提交逻辑
+ */
+/**
+ * @type {CommonFormProps}
+ */
 const props = defineProps({
   /**
    * @type [CommonFormOption]
@@ -17,6 +28,22 @@ const props = defineProps({
   },
   model: {
     type: Object
+  },
+  showButtons: {
+    type: Boolean,
+    default: true
+  },
+  showSubmit: {
+    type: Boolean,
+    default: true
+  },
+  showReset: {
+    type: Boolean,
+    default: true
+  },
+  submitForm: {
+    type: Function,
+    default () {}
   }
 })
 
@@ -68,8 +95,26 @@ const form = ref(null)
       :model="model"
       :option="option"
     />
+    <el-form-item v-if="showButtons">
+      <el-button
+        v-if="showSubmit"
+        type="primary"
+        @click="submitForm(form)"
+      >
+        {{ $t('common.label.submit') }}
+      </el-button>
+      <el-button
+        v-if="showReset"
+        @click="form.resetFields()"
+      >
+        {{ $t('common.label.reset') }}
+      </el-button>
+      <slot
+        :form="form"
+        name="buttons"
+      />
+    </el-form-item>
     <slot
-      name="default"
       :form="form"
     />
   </el-form>

src/components/common-table/common-table-column.vue

@@ -0,0 +1,35 @@
+<script setup>
+/**
+ * 表格列配置信息，对应el-table-column数据
+ * @typedef {Object} CommonTableColumn
+ * @property {string} label 标签头
+ * @property {string} labelKey 国际化
+ * @property {string} property 数据属性
+ * @property {string} width 宽度
+ * @property {boolean} isOperation 是否是操作列
+ */
+/**
+ * 配置信息
+ */
+const props = defineProps({
+  /**
+   * @type {CommonTableColumn}
+   */
+  column: {
+    type: Object,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <el-table-column
+    :label="column.label"
+    :property="column.property"
+    :width="column.width"
+  />
+</template>
+
+<style scoped>
+
+</style>

src/components/common-table/index.vue

@@ -0,0 +1,56 @@
+<script setup>
+/**
+ * @typedef {TableProps} CommonTableProps
+ * @property {[CommonTableColumn]} columns
+ */
+import CommonTableColumn from '@/components/common-table/common-table-column.vue'
+
+/**
+ * @type CommonTableProps
+ */
+const props = defineProps({
+  /**
+   * @type {[CommonTableColumn]}
+   */
+  columns: {
+    type: Array,
+    required: true
+  },
+  /**
+   * 显示数据
+   */
+  data: {
+    type: Array,
+    default () {
+      return []
+    }
+  },
+  highlightCurrentRow: {
+    type: Boolean,
+    default: true
+  },
+  stripe: {
+    type: Boolean,
+    default: true
+  }
+})
+</script>
+
+<template>
+  <el-table
+    :v-bind="$attrs"
+    :highlight-current-row="highlightCurrentRow"
+    :stripe="stripe"
+    :data="data"
+  >
+    <common-table-column
+      v-for="(column, index) in columns"
+      :key="index"
+      :column="column"
+    />
+  </el-table>
+</template>
+
+<style scoped>
+
+</style>

src/components/index.js

@@ -4,6 +4,7 @@ import CommonFormControl from '@/components/common-form-control/index.vue'
 import CommonMenu from '@/components/common-menu/index.vue'
 import CommonMenuItem from '@/components/common-menu-item/index.vue'
 import CommonTabsView from '@/components/common-tabs-view/index.vue'
+import CommonTable from '@/components/common-table/index.vue'
 
 /**
  * 自定义通用组件自动注册
@@ -19,5 +20,6 @@ export default {
     Vue.component('CommonMenu', CommonMenu)
     Vue.component('CommonMenuItem', CommonMenuItem)
     Vue.component('CommonTabsView', CommonTabsView)
+    Vue.component('CommonTable', CommonTable)
   }
 }