canrd-outside / order-erp-front · Commits

Commit 8eaf57562610a833c8083ae9957f458319d1cc93

Authored by 无木
1 parent d018363d

feat(table): editable component text align 

使可编辑单元格显示的input中的文字对齐方式与列自身的align属性相匹配
Inline Side-by-side
Showing 2 changed files with 41 additions and 19 deletions
src/components/Table/src/components/editable/EditableCell.vue
  View file @8eaf575
... ... @@ -13,6 +13,7 @@
13 13 :popoverVisible="getRuleVisible"
14 14 :rule="getRule"
15 15 :ruleMessage="ruleMessage"
  16 + :class="getWrapperClass"
16 17 size="small"
17 18 ref="elRef"
18 19 @change="handleChange"
... ... @@ -140,6 +141,11 @@
140 141 };
141 142 });
142 143  
  144 + const getWrapperClass = computed(() => {
  145 + const { align = 'center' } = props.column;
  146 + return `edit-cell-align-${align}`;
  147 + });
  148 +
143 149 const getRowEditable = computed(() => {
144 150 const { editable } = props.record || {};
145 151 return !!editable;
... ... @@ -315,6 +321,7 @@
315 321 getComponentProps,
316 322 handleOptionsChange,
317 323 getWrapperStyle,
  324 + getWrapperClass,
318 325 getRowEditable,
319 326 getValues,
320 327 handleEnter,
... ... @@ -326,6 +333,30 @@
326 333 <style lang="less">
327 334 @prefix-cls: ~'@{namespace}-editable-cell';
328 335  
  336 + .edit-cell-align-left {
  337 + text-align: left;
  338 +
  339 + input:not(.ant-calendar-picker-input, .ant-time-picker-input) {
  340 + text-align: left;
  341 + }
  342 + }
  343 +
  344 + .edit-cell-align-center {
  345 + text-align: center;
  346 +
  347 + input:not(.ant-calendar-picker-input, .ant-time-picker-input) {
  348 + text-align: center;
  349 + }
  350 + }
  351 +
  352 + .edit-cell-align-right {
  353 + text-align: right;
  354 +
  355 + input:not(.ant-calendar-picker-input, .ant-time-picker-input) {
  356 + text-align: right;
  357 + }
  358 + }
  359 +
329 360 .edit-cell-rule-popover {
330 361 .ant-popover-inner-content {
331 362 padding: 4px 8px;
... ...
src/views/demo/table/EditRowTable.vue
  View file @8eaf575
... ... @@ -28,33 +28,34 @@
28 28 editComponentProps: {
29 29 prefix: '$',
30 30 },
31   - width: 200,
  31 + width: 150,
32 32 },
33 33 {
34 34 title: '默认输入状态',
35 35 dataIndex: 'name7',
36 36 editRow: true,
37   - width: 200,
  37 + width: 150,
38 38 },
39 39 {
40 40 title: '输入框校验',
41 41 dataIndex: 'name1',
42 42 editRow: true,
  43 + align: 'left',
43 44 // 默认必填校验
44 45 editRule: true,
45   - width: 200,
  46 + width: 150,
46 47 },
47 48 {
48 49 title: '输入框函数校验',
49 50 dataIndex: 'name2',
50 51 editRow: true,
  52 + align: 'right',
51 53 editRule: async (text) => {
52 54 if (text === '2') {
53 55 return '不能输入该值';
54 56 }
55 57 return '';
56 58 },
57   - width: 200,
58 59 },
59 60 {
60 61 title: '数字输入框',
... ... @@ -62,7 +63,7 @@
62 63 editRow: true,
63 64 editRule: true,
64 65 editComponent: 'InputNumber',
65   - width: 200,
  66 + width: 150,
66 67 },
67 68 {
68 69 title: '下拉框',
... ... @@ -102,7 +103,7 @@
102 103 valueFormat: 'YYYY-MM-DD',
103 104 format: 'YYYY-MM-DD',
104 105 },
105   - width: 200,
  106 + width: 150,
106 107 },
107 108 {
108 109 title: '时间选择',
... ... @@ -113,17 +114,7 @@
113 114 valueFormat: 'HH:mm',
114 115 format: 'HH:mm',
115 116 },
116   - width: 200,
117   - },
118   - {
119   - title: '远程下拉',
120   - dataIndex: 'name4',
121   - editRow: true,
122   - editComponent: 'ApiSelect',
123   - editComponentProps: {
124   - api: optionsListApi,
125   - },
126   - width: 200,
  117 + width: 100,
127 118 },
128 119 {
129 120 title: '勾选框',
... ... @@ -134,7 +125,7 @@
134 125 editValueMap: (value) => {
135 126 return value ? '是' : '否';
136 127 },
137   - width: 200,
  128 + width: 100,
138 129 },
139 130 {
140 131 title: '开关',
... ... @@ -144,7 +135,7 @@
144 135 editValueMap: (value) => {
145 136 return value ? '开' : '关';
146 137 },
147   - width: 200,
  138 + width: 100,
148 139 },
149 140 ];
150 141 export default defineComponent({
... ...