|
1 | | -import { watchEffect, reactive, defineComponent, nextTick } from 'vue'; |
| 1 | +import { reactive, defineComponent, nextTick, computed, watch } from 'vue'; |
2 | 2 | import FilterFilled from '@ant-design/icons-vue/FilterFilled'; |
3 | 3 | import Menu, { SubMenu, Item as MenuItem } from '../vc-menu'; |
4 | 4 | import closest from 'dom-closest'; |
@@ -27,32 +27,44 @@ export default defineComponent({ |
27 | 27 | props: initDefaultProps(FilterMenuProps, { |
28 | 28 | column: {}, |
29 | 29 | }), |
30 | | - setup(nextProps) { |
31 | | - let preProps = { ...nextProps }; |
32 | | - const { selectedKeys, column } = nextProps; |
| 30 | + setup(props) { |
| 31 | + const sSelectedKeys = computed(() => props.selectedKeys); |
| 32 | + const sVisible = computed(() => { |
| 33 | + return 'filterDropdownVisible' in props.column ? props.column.filterDropdownVisible : false; |
| 34 | + }); |
| 35 | + const sValueKeys = computed(() => generateValueMaps(props.column.filters)); |
33 | 36 | const state = reactive({ |
34 | 37 | neverShown: false, |
35 | | - sSelectedKeys: selectedKeys, |
| 38 | + sSelectedKeys: sSelectedKeys.value, |
36 | 39 | sKeyPathOfSelectedItem: {}, // 记录所有有选中子菜单的祖先菜单 |
37 | | - sVisible: 'filterDropdownVisible' in column ? column.filterDropdownVisible : false, |
38 | | - sValueKeys: generateValueMaps(column.filters), |
| 40 | + sVisible: sVisible.value, |
| 41 | + sValueKeys: sValueKeys.value, |
39 | 42 | }); |
40 | | - watchEffect( |
41 | | - () => { |
42 | | - const { column } = nextProps; |
43 | | - if (!shallowequal(preProps.selectedKeys, nextProps.selectedKeys)) { |
44 | | - state.sSelectedKeys = nextProps.selectedKeys; |
45 | | - } |
46 | | - if (!shallowequal((preProps.column || {}).filters, (nextProps.column || {}).filters)) { |
47 | | - state.sValueKeys = generateValueMaps(nextProps.column.filters); |
48 | | - } |
49 | | - if ('filterDropdownVisible' in column) { |
50 | | - state.sVisible = column.filterDropdownVisible; |
51 | | - } |
52 | | - preProps = { ...nextProps }; |
53 | | - }, |
54 | | - { flush: 'sync' }, |
55 | | - ); |
| 43 | + watch(sSelectedKeys, () => { |
| 44 | + state.sSelectedKeys = sSelectedKeys.value; |
| 45 | + }); |
| 46 | + watch(sVisible, () => { |
| 47 | + state.sVisible = sVisible.value; |
| 48 | + }); |
| 49 | + watch(sValueKeys, () => { |
| 50 | + state.sValueKeys = sValueKeys.value; |
| 51 | + }); |
| 52 | + // watchEffect( |
| 53 | + // () => { |
| 54 | + // const { column } = nextProps; |
| 55 | + // if (!shallowequal(preProps.selectedKeys, nextProps.selectedKeys)) { |
| 56 | + // state.sSelectedKeys = nextProps.selectedKeys; |
| 57 | + // } |
| 58 | + // if (!shallowequal((preProps.column || {}).filters, (nextProps.column || {}).filters)) { |
| 59 | + // state.sValueKeys = generateValueMaps(nextProps.column.filters); |
| 60 | + // } |
| 61 | + // if ('filterDropdownVisible' in column) { |
| 62 | + // state.sVisible = column.filterDropdownVisible; |
| 63 | + // } |
| 64 | + // preProps = { ...nextProps }; |
| 65 | + // }, |
| 66 | + // { flush: 'sync' }, |
| 67 | + // ); |
56 | 68 | return state; |
57 | 69 | }, |
58 | 70 |
|
|
0 commit comments