Commit 9f4d1719caa76de94e6362c16e4df3ac28df253c
1 parent
035f55af
fix(table): support change event
修复表格不支持change事件的问题。 fix #677
Showing
2 changed files
with
13 additions
and
3 deletions
src/components/Table/src/BasicTable.vue
@@ -81,6 +81,7 @@ | @@ -81,6 +81,7 @@ | ||
81 | 'edit-row-end', | 81 | 'edit-row-end', |
82 | 'edit-change', | 82 | 'edit-change', |
83 | 'expanded-rows-change', | 83 | 'expanded-rows-change', |
84 | + 'change', | ||
84 | ], | 85 | ], |
85 | setup(props, { attrs, emit, slots }) { | 86 | setup(props, { attrs, emit, slots }) { |
86 | const tableElRef = ref<ComponentRef>(null); | 87 | const tableElRef = ref<ComponentRef>(null); |
@@ -116,7 +117,7 @@ | @@ -116,7 +117,7 @@ | ||
116 | } = useRowSelection(getProps, tableData, emit); | 117 | } = useRowSelection(getProps, tableData, emit); |
117 | 118 | ||
118 | const { | 119 | const { |
119 | - handleTableChange, | 120 | + handleTableChange: onTableChange, |
120 | getDataSourceRef, | 121 | getDataSourceRef, |
121 | getDataSource, | 122 | getDataSource, |
122 | setTableData, | 123 | setTableData, |
@@ -138,6 +139,11 @@ | @@ -138,6 +139,11 @@ | ||
138 | emit | 139 | emit |
139 | ); | 140 | ); |
140 | 141 | ||
142 | + function handleTableChange(...args) { | ||
143 | + onTableChange.call(undefined, ...args); | ||
144 | + emit('change', ...args); | ||
145 | + } | ||
146 | + | ||
141 | const { | 147 | const { |
142 | getViewColumns, | 148 | getViewColumns, |
143 | getColumns, | 149 | getColumns, |
@@ -204,7 +210,7 @@ | @@ -204,7 +210,7 @@ | ||
204 | propsData = omit(propsData, 'scroll'); | 210 | propsData = omit(propsData, 'scroll'); |
205 | } | 211 | } |
206 | 212 | ||
207 | - propsData = omit(propsData, 'class'); | 213 | + propsData = omit(propsData, ['class', 'onChange']); |
208 | return propsData; | 214 | return propsData; |
209 | }); | 215 | }); |
210 | 216 |
src/views/demo/table/UseTable.vue
@@ -15,7 +15,7 @@ | @@ -15,7 +15,7 @@ | ||
15 | <a-button class="mr-2" @click="clearSelect"> 清空选中行 </a-button> | 15 | <a-button class="mr-2" @click="clearSelect"> 清空选中行 </a-button> |
16 | <a-button class="mr-2" @click="getPagination"> 获取分页信息 </a-button> | 16 | <a-button class="mr-2" @click="getPagination"> 获取分页信息 </a-button> |
17 | </div> | 17 | </div> |
18 | - <BasicTable @register="registerTable" /> | 18 | + <BasicTable @register="registerTable" @change="onChange" /> |
19 | </div> | 19 | </div> |
20 | </template> | 20 | </template> |
21 | <script lang="ts"> | 21 | <script lang="ts"> |
@@ -28,6 +28,9 @@ | @@ -28,6 +28,9 @@ | ||
28 | components: { BasicTable }, | 28 | components: { BasicTable }, |
29 | setup() { | 29 | setup() { |
30 | const { createMessage } = useMessage(); | 30 | const { createMessage } = useMessage(); |
31 | + function onChange() { | ||
32 | + console.log('onChange', arguments); | ||
33 | + } | ||
31 | const [ | 34 | const [ |
32 | registerTable, | 35 | registerTable, |
33 | { | 36 | { |
@@ -121,6 +124,7 @@ | @@ -121,6 +124,7 @@ | ||
121 | getSelectRowKeyList, | 124 | getSelectRowKeyList, |
122 | setSelectedRowKeyList, | 125 | setSelectedRowKeyList, |
123 | clearSelect, | 126 | clearSelect, |
127 | + onChange, | ||
124 | }; | 128 | }; |
125 | }, | 129 | }, |
126 | }); | 130 | }); |