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

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)
   }
 }

src/messages/common_cn.js

@@ -21,6 +21,8 @@ common.label.personalCenter = '个人中心'
 common.label.personalInfo = '个人资料'
 common.label.about = '关于'
 common.label.logout = '退出'
+common.label.submit = '提交'
+common.label.reset = '重置'
 
 //* =======================msg=====================//
 common.msg.nonNull = '{0}不能为空'

src/messages/common_en.js

@@ -21,6 +21,8 @@ common.label.personalCenter = 'Personal Center'
 common.label.personalInfo = 'Personal Info'
 common.label.about = 'About'
 common.label.logout = 'Logout'
+common.label.submit = 'Submit'
+common.label.reset = 'Reset'
 
 //* =======================msg=====================//
 common.msg.nonNull = '{0} is required.'

src/views/components/global/GlobalSettings.vue

@@ -88,6 +88,7 @@ const options = [
     </template>
     <template #default>
       <common-form
+        :show-buttons="false"
         :options="options"
         label-position="left"
       />

src/views/tools/Forms.vue

@@ -75,11 +75,29 @@ const formOptions = [{
       value: 'unknown'
     }
   ]
+}, {
+  label: '地址',
+  prop: 'address',
+  value: '',
+  attrs: {
+    type: 'textarea'
+  }
 }]
 const userDto = ref({
   userName: '',
   userPassword: ''
 })
+const submitForm = (form) => {
+  console.info(form)
+  form.validate((valid) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!')
+      return false
+    }
+  })
+}
 </script>
 
 <template>
@@ -87,8 +105,17 @@ const userDto = ref({
     <common-form
       :model="userDto"
       :options="formOptions"
+      :submit-form="submitForm"
       label-width="120px"
-    />
+    >
+      <template
+        #buttons="{form}"
+      >
+        <el-button @click="form.resetFields()">
+          自定义按钮
+        </el-button>
+      </template>
+    </common-form>
     <div>
       {{ userDto }}
     </div>

src/views/tools/Tables.vue

@@ -1,11 +1,54 @@
 <script setup>
-
+const tableData = [
+  {
+    birthday: '2016-05-03',
+    userName: 'Tom',
+    gender: 'male',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    birthday: '2016-05-02',
+    userName: 'Tom',
+    gender: 'female',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    birthday: '2016-05-04',
+    userName: 'Tom',
+    gender: 'male',
+    address: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    birthday: '2016-05-01',
+    userName: 'Tom',
+    gender: 'female',
+    address: 'No. 189, Grove St, Los Angeles'
+  }
+]
+/**
+ *
+ * @type {[CommonTableColumn]}
+ */
+const columns = [{
+  label: '用户名',
+  property: 'userName'
+}, {
+  label: '性别',
+  property: 'gender'
+}, {
+  label: '出生日期',
+  property: 'birthday'
+}, {
+  label: '地址',
+  property: 'address'
+}]
 </script>
 
 <template>
-  <div>
-    <strong>表格测试</strong>
-  </div>
+  <common-table
+    :data="tableData"
+    :columns="columns"
+  />
 </template>
 
 <style scoped>