feat(table): editable component text align

使可编辑单元格显示的input中的文字对齐方式与列自身的align属性相匹配
vbenjs · May 26, 2021 · 8eaf575 · 8eaf575
1 parent d018363
commit 8eaf575
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 19 deletions.
diff --git 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
@@ -28,41 +28,42 @@
       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: '数字输入框',
       dataIndex: 'id',
       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({