From 0a412ace9f5f8b71ce3c73be9b174035d9cbf827 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 22 Sep 2022 12:51:19 +0800
Subject: [PATCH] =?UTF-8?q?style(form):=20table=20=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/form/src/containers/GroupList.vue |  6 +++---
 packages/form/src/containers/Table.vue     | 13 +++++++------
 packages/form/src/theme/table.scss         |  5 +++++
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/form/src/containers/GroupList.vue b/packages/form/src/containers/GroupList.vue
index 1e2032f8..88408c87 100644
--- a/packages/form/src/containers/GroupList.vue
+++ b/packages/form/src/containers/GroupList.vue
@@ -23,14 +23,13 @@
 
     <el-button @click="addHandler" size="small" v-if="addable">添加组</el-button>
 
-    <el-button icon="el-icon-s-grid" size="small" @click="toggleMode" v-if="config.enableToggleMode"
-      >切换为表格</el-button
-    >
+    <el-button :icon="Grid" size="small" @click="toggleMode" v-if="config.enableToggleMode">切换为表格</el-button>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, inject, PropType } from 'vue';
+import { Grid } from '@element-plus/icons-vue';
 
 import { FormState, GroupListConfig } from '../schema';
 import { initValue } from '../utils/form';
@@ -144,6 +143,7 @@ export default defineComponent({
         }))) as any;
     };
     return {
+      Grid,
       addable,
       toggleMode,
       removeHandler,
diff --git a/packages/form/src/containers/Table.vue b/packages/form/src/containers/Table.vue
index 9d76a7d4..02baa75d 100644
--- a/packages/form/src/containers/Table.vue
+++ b/packages/form/src/containers/Table.vue
@@ -21,15 +21,14 @@
             </template>
           </el-table-column>
 
-          <el-table-column label="操作" width="60" :fixed="config.fixed === false ? undefined : 'left'">
+          <el-table-column label="操作" width="55" align="center" :fixed="config.fixed === false ? undefined : 'left'">
             <template v-slot="scope">
-              <el-button
+              <el-icon
                 v-show="showDelete(scope.$index + 1 + pagecontext * pagesize - 1)"
-                type="danger"
-                text
-                :icon="Delete"
+                class="m-table-delete-icon"
                 @click="removeHandler(scope.$index + 1 + pagecontext * pagesize - 1)"
-              ></el-button>
+                ><Delete
+              /></el-icon>
             </template>
           </el-table-column>
 
@@ -219,6 +218,8 @@ export default defineComponent({
 
   emits: ['change', 'select'],
 
+  components: { Delete },
+
   setup(props, { emit }) {
     let timer: any | null = null;
     const mForm = inject<FormState | undefined>('mForm');
diff --git a/packages/form/src/theme/table.scss b/packages/form/src/theme/table.scss
index 55e253d5..b9e9d9e6 100644
--- a/packages/form/src/theme/table.scss
+++ b/packages/form/src/theme/table.scss
@@ -65,4 +65,9 @@
   .el-form-item {
     margin-bottom: 0;
   }
+
+  .m-table-delete-icon {
+    color: #f56c6c;
+    cursor: pointer;
+  }
 }