From 8eaf57562610a833c8083ae9957f458319d1cc93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= <netfan@foxmail.com>
Date: Wed, 26 May 2021 23:06:07 +0800
Subject: [PATCH] feat(table): editable component text align
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

使可编辑单元格显示的input中的文字对齐方式与列自身的align属性相匹配
---
 .../src/components/editable/EditableCell.vue  | 31 +++++++++++++++++++
 src/views/demo/table/EditRowTable.vue         | 29 ++++++-----------
 2 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/src/components/Table/src/components/editable/EditableCell.vue b/src/components/Table/src/components/editable/EditableCell.vue
index 326ba501..2a8930a8 100644
--- a/src/components/Table/src/components/editable/EditableCell.vue
+++ b/src/components/Table/src/components/editable/EditableCell.vue
@@ -13,6 +13,7 @@
         :popoverVisible="getRuleVisible"
         :rule="getRule"
         :ruleMessage="ruleMessage"
+        :class="getWrapperClass"
         size="small"
         ref="elRef"
         @change="handleChange"
@@ -140,6 +141,11 @@
         };
       });
 
+      const getWrapperClass = computed(() => {
+        const { align = 'center' } = props.column;
+        return `edit-cell-align-${align}`;
+      });
+
       const getRowEditable = computed(() => {
         const { editable } = props.record || {};
         return !!editable;
@@ -315,6 +321,7 @@
         getComponentProps,
         handleOptionsChange,
         getWrapperStyle,
+        getWrapperClass,
         getRowEditable,
         getValues,
         handleEnter,
@@ -326,6 +333,30 @@
 <style lang="less">
   @prefix-cls: ~'@{namespace}-editable-cell';
 
+  .edit-cell-align-left {
+    text-align: left;
+
+    input:not(.ant-calendar-picker-input, .ant-time-picker-input) {
+      text-align: left;
+    }
+  }
+
+  .edit-cell-align-center {
+    text-align: center;
+
+    input:not(.ant-calendar-picker-input, .ant-time-picker-input) {
+      text-align: center;
+    }
+  }
+
+  .edit-cell-align-right {
+    text-align: right;
+
+    input:not(.ant-calendar-picker-input, .ant-time-picker-input) {
+      text-align: right;
+    }
+  }
+
   .edit-cell-rule-popover {
     .ant-popover-inner-content {
       padding: 4px 8px;
diff --git a/src/views/demo/table/EditRowTable.vue b/src/views/demo/table/EditRowTable.vue
index a3cda32b..622ac7d0 100644
--- a/src/views/demo/table/EditRowTable.vue
+++ b/src/views/demo/table/EditRowTable.vue
@@ -28,33 +28,34 @@
       editComponentProps: {
         prefix: '$',
       },
-      width: 200,
+      width: 150,
     },
     {
       title: '默认输入状态',
       dataIndex: 'name7',
       editRow: true,
-      width: 200,
+      width: 150,
     },
     {
       title: '输入框校验',
       dataIndex: 'name1',
       editRow: true,
+      align: 'left',
       // 默认必填校验
       editRule: true,
-      width: 200,
+      width: 150,
     },
     {
       title: '输入框函数校验',
       dataIndex: 'name2',
       editRow: true,
+      align: 'right',
       editRule: async (text) => {
         if (text === '2') {
           return '不能输入该值';
         }
         return '';
       },
-      width: 200,
     },
     {
       title: '数字输入框',
@@ -62,7 +63,7 @@
       editRow: true,
       editRule: true,
       editComponent: 'InputNumber',
-      width: 200,
+      width: 150,
     },
     {
       title: '下拉框',
@@ -102,7 +103,7 @@
         valueFormat: 'YYYY-MM-DD',
         format: 'YYYY-MM-DD',
       },
-      width: 200,
+      width: 150,
     },
     {
       title: '时间选择',
@@ -113,17 +114,7 @@
         valueFormat: 'HH:mm',
         format: 'HH:mm',
       },
-      width: 200,
-    },
-    {
-      title: '远程下拉',
-      dataIndex: 'name4',
-      editRow: true,
-      editComponent: 'ApiSelect',
-      editComponentProps: {
-        api: optionsListApi,
-      },
-      width: 200,
+      width: 100,
     },
     {
       title: '勾选框',
@@ -134,7 +125,7 @@
       editValueMap: (value) => {
         return value ? '是' : '否';
       },
-      width: 200,
+      width: 100,
     },
     {
       title: '开关',
@@ -144,7 +135,7 @@
       editValueMap: (value) => {
         return value ? '开' : '关';
       },
-      width: 200,
+      width: 100,
     },
   ];
   export default defineComponent({