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

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>