feat(SelectTree, SelectCascader): expandedKeys 支持 v-model (#737)

WeBankFinTech · Apr 16, 2024 · cd281e2 · cd281e2
1 parent 25f8d86
commit cd281e2
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 24 deletions.
diff --git a/components/select-cascader/selectCascader.vue b/components/select-cascader/selectCascader.vue
@@ -39,12 +39,12 @@
                 <Cascader
                     v-show="!filterText"
                     ref="cascaderRef"
+                    v-model:expandedKeys="expandedKeys"
                     :selectedKeys="selectedKeys"
                     :checkedKeys="checkedKeys"
                     :initLoadKeys="initLoadKeys"
                     :data="data"
                     :emptyText="listEmptyText"
-                    :expandedKeys="expandedKeys"
                     :selectable="cascaderSelectable"
                     :checkable="cascaderCheckable"
                     :checkStrictly="checkStrictly"
@@ -161,6 +161,7 @@ export default defineComponent({
     emits: [
         UPDATE_MODEL_EVENT,
         CHANGE_EVENT,
+        'update:expandedKeys',
         'removeTag',
         'visibleChange',
         'focus',
@@ -173,6 +174,7 @@ export default defineComponent({
             valueType: computed(() => (props.multiple ? 'array' : 'string')),
         });
         const isOpened = ref(false);
+
         const [currentValue, updateCurrentValue] = props.multiple
             ? // 与 props 中 modelValue 类型保持一致
               (useArrayModel(props, emit) as unknown as UseArrayModelReturn<
@@ -248,14 +250,19 @@ export default defineComponent({
             }
             return [];
         });
-        const expandedKeys = computed(() => {
-            if (!props.multiple) {
-                return getExpandedKeysBySelectedKeys(
-                    nodeList.value,
-                    selectedKeys.value as CascaderNodeKey[],
-                );
-            }
-            return [];
+        const expandedKeys = computed({
+            get: () => {
+                if (!props.multiple) {
+                    return getExpandedKeysBySelectedKeys(
+                        nodeList.value,
+                        selectedKeys.value as CascaderNodeKey[],
+                    );
+                }
+                return [];
+            },
+            set: (nextValue) => {
+                emit('update:expandedKeys', nextValue);
+            },
         });
         const checkedKeys = computed(() => {
             if (props.multiple) {

diff --git a/components/select-tree/selectTree.vue b/components/select-tree/selectTree.vue
@@ -40,11 +40,11 @@
                     <Tree
                         v-show="data.length"
                         ref="refTree"
+                        v-model:expandedKeys="currentExpandedKeys"
                         :selectedKeys="selectedKeys"
                         :checkedKeys="checkedKeys"
                         :data="data"
                         :defaultExpandAll="defaultExpandAll"
-                        :expandedKeys="expandedKeys"
                         :accordion="accordion"
                         :selectable="treeSelectable"
                         :checkable="treeCheckable"
@@ -83,11 +83,11 @@
                         <Tree
                             v-show="data.length"
                             ref="refTree"
+                            v-model:expandedKeys="currentExpandedKeys"
                             :selectedKeys="selectedKeys"
                             :checkedKeys="checkedKeys"
                             :data="data"
                             :defaultExpandAll="defaultExpandAll"
-                            :expandedKeys="expandedKeys"
                             :accordion="accordion"
                             :selectable="treeSelectable"
                             :checkable="treeCheckable"
@@ -194,6 +194,7 @@ export default defineComponent({
     emits: [
         UPDATE_MODEL_EVENT,
         CHANGE_EVENT,
+        'update:expandedKeys',
         'removeTag',
         'visibleChange',
         'focus',
@@ -206,12 +207,17 @@ export default defineComponent({
             valueType: computed(() => (props.multiple ? 'array' : 'string')),
         });
         const isOpened = ref(false);
+
         const [currentValue, updateCurrentValue] = props.multiple
             ? // 与 props 中 modelValue 类型保持一致
               (useArrayModel(props, emit) as unknown as UseArrayModelReturn<
                   Array<TreeNodeKey> | Array<Array<TreeNodeKey>>
               >)
             : useNormalModel(props, emit);
+        const [currentExpandedKeys] = useNormalModel(props, emit, {
+            prop: 'expandedKeys',
+        });
+
         const filterText = ref('');
 
         const { t } = useLocale();
@@ -434,6 +440,7 @@ export default defineComponent({
             prefixCls,
             isOpened,
             currentValue,
+            currentExpandedKeys,
             handleRemove,
             handleClear,
             selectedOptions,

diff --git a/docs/.vitepress/components/selectTree/common.vue b/docs/.vitepress/components/selectTree/common.vue
@@ -1,7 +1,7 @@
 <template>
-    <FSelectTree :modelValue="'40'" :data="data"></FSelectTree>
+    <FSelectTree :modelValue="'40'" :data="data" />
 </template>
-<script>
+<script setup>
 import { ref, h } from 'vue';
 // eslint-disable-next-line import/no-unresolved
 import { PictureOutlined, PlusCircleOutlined } from '@fesjs/fes-design/icon';
@@ -27,17 +27,10 @@ function createLabel(level) {
     if (level === 1) return '三生万物';
 }
 
-export default {
-    setup() {
-        const data = ref([]);
-        setTimeout(() => {
-            data.value = createData(4);
-        });
-        return {
-            data,
-        };
-    },
-};
+const data = ref([]);
+setTimeout(() => {
+    data.value = createData(4);
+});
 </script>
 <style scoped>
 .fes-select-tree {