style(form): table 删除样式调整

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,

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');

packages/form/src/theme/table.scss

@@ -65,4 +65,9 @@
   .el-form-item {
     margin-bottom: 0;
   }
+
+  .m-table-delete-icon {
+    color: #f56c6c;
+    cursor: pointer;
+  }
 }