refactor:TTable组件--单击编辑单元格--默认表头显示编辑icon

wocwin · Nov 29, 2024 · 34402d7 · 34402d7
1 parent d62a02a
commit 34402d7
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 6 deletions.
diff --git a/docs/components/TTable/base.md b/docs/components/TTable/base.md
@@ -398,6 +398,7 @@ TTable/expand
 | ----canEdit                                 | 是否开启单元格编辑功能                                                              | Boolean          | false                                      |
 | ----isClickEdit<el-tag>1.4.15</el-tag>      | 是否开启单击-单元格编辑功能                                                         | Boolean          | false                                      |
 | ----isShowEditIcon<el-tag>1.4.15</el-tag>   | 开启单击-单元格编辑后表头是否显示编辑图标                                           | Boolean          | false                                      |
+| ----editIconAlign<el-tag>1.4.15</el-tag>    | 编辑icon表头的对齐方式(可选值：flex-end、center、flex-start)                        | String           | 'center'                                   |
 | ----configEdit                              | 表格编辑配置（开启编辑功能有效）                                                    | Object           | -                                          |
 | ----------rules                             | 规则（可依据 elementPlus el-form 配置————对应 columns 的 prop 值）                  | Object           | -                                          |
 | ----------label                             | placeholder 显示                                                                    | String           | -                                          |
@@ -411,6 +412,7 @@ TTable/expand
 | ----------arrKey                            | type:select-arr/radio/checkbox 时对应显示的数字字段                                 | String           | key                                        |
 | ----------ref                               | 当前使用组件的 ref 标识（可以通过 getRefs 事件返回）                                | String           | -                                          |
 | ----------isShowTips<el-tag>1.4.15</el-tag> | 开启单击-单元格编辑后鼠标移入是否显示tip                                            | Boolean          | false                                      |
+| ----------tipbind<el-tag>1.4.15</el-tag>    | 继承el-tooltip的所有属性                                                            | Object           | -                                          |
 | ----filters                                 | 字典过滤                                                                            | Object           | -                                          |
 | ----------list                              | listTypeInfo 里面对应的下拉数据源命名                                               | String           | -                                          |
 | ----------key                               | 数据源的 key 字段                                                                   | String           | 'value'                                    |

diff --git a/docs/examples/TTable/editSingle.vue b/docs/examples/TTable/editSingle.vue
@@ -59,7 +59,6 @@ const table = ref<TableTypes.Table>({
       label: "爱好单选",
       minWidth: "180",
       isClickEdit: true,
-      isShowEditIcon: true,
       configEdit: {
         label: "爱好单选",
         type: "select-arr",
@@ -68,7 +67,6 @@ const table = ref<TableTypes.Table>({
         event: "hobbyList",
         arrLabel: "label",
         arrKey: "value",
-        isShowTips: true
       }
     },
     {

diff --git a/packages/table/src/index.vue b/packages/table/src/index.vue
@@ -214,9 +214,13 @@
                 <span style="color: #f56c6c; font-size: 16px; margin-right: 3px">*</span>
                 <span>{{ item.label }}</span>
               </div>
-              <div v-if="item.isClickEdit">
+              <div
+                v-if="item.isClickEdit"
+                class="click_edit"
+                :style="{ justifyContent: item.editIconAlign || align || 'center' }"
+              >
                 <span>{{ item.label }}</span>
-                <el-icon v-if="!item.isShowEditIcon" v-bind="{ ...item.editIconBind }">
+                <el-icon v-if="!item.isShowEditIcon" v-bind="{ size: 14, ...item.editIconBind }">
                   <Edit />
                 </el-icon>
               </div>
@@ -1093,7 +1097,18 @@ defineExpose({
       }
     }
   }
-
+  .el-table {
+    .cell {
+      .click_edit {
+        display: flex;
+        align-items: center;
+        line-height: 1;
+        .el-icon {
+          margin-left: 2px;
+        }
+      }
+    }
+  }
   .el-table th,
   .el-table td {
     padding: 8px 0;

diff --git a/packages/table/src/singleEdit.vue b/packages/table/src/singleEdit.vue
@@ -8,7 +8,7 @@
           effect: 'light',
           content: '单击可编辑',
           placement: 'top',
-          ...configEdit.bind
+          ...configEdit.tipbind
         }"
       >
         <div v-if="childCom.includes(configEdit.type)">{{ childVal }}&nbsp;</div>