fix 如果选中项ID相同需要去重

hookehuyr
Commit 6098993afd0722f68ec0e81146558c099be00fd7 6098993a 1 parent cc365183
Showing 1 changed file with 50 additions and 38 deletions
doc/App.vue
--- a/doc/App.vue
View file @6098993
+++ b/doc/App.vue
View file @6098993
@@ -272,6 +272,8 @@
                 <el-tree
                   :data="item.data"
                   :props="state.defaultProps"
+                  node-key="id"
+                  :default-expanded-keys="state.currentNodeKey"
                   empty-text="暂无数据"
                   @node-click="handleNodeClick"
                 />
@@ -302,12 +304,13 @@
               tab-position="left"
               style=""
               class="demo-tabs"
-              v-model="activeTabContent"
+              v-model="state.activeTabContent"
               @tab-click="handleTabContentClick"
             >
               <el-tab-pane
                 v-for="(role, idx) in item.data"
                 :key="idx"
+                :name="role.label"
                 :label="role.label"
               >
                 <el-checkbox-group
@@ -465,7 +468,9 @@ export default {
         }
       ],
       userTags: [],
+      currentNodeKey: [], // 当前展开的节点
       activeTabId: "tab-1", // TODO: 需要获取默认第一个ID
+      activeTabContent: '',
       userTabs: [],
       tabSelectData: [],
       userTabType: "tree",
@@ -590,15 +595,15 @@ export default {
               children: [],
               list: [
                 {
-                  id: "role-1-2",
+                  id: "user-1-1",
-                  label: "选项 A",
+                  label: "用户1-1",
-                  checked: false,
+                  checked: true,
                   disabled: false
                 },
                 {
-                  id: "role-1-3",
+                  id: "user-2-2",
-                  label: "选项 B",
+                  label: "用户2-2",
-                  checked: true,
+                  checked: false,
                   disabled: false
                 },
                 {
@@ -637,6 +642,8 @@ export default {
       state.tabSelectData = tab.data; // tab选中数据提供给list类型使用
       state.userList = []; // 清空用户列表
       state.checkedUserList = []; // 清空选中用户列表
+      state.activeTabContent = ''; // 清空侧边栏显示
+      state.currentNodeKey = []; // 清空树形的默认展开
       // console.log(tab, event);
       // 设置当前激活的tab
       state.userTabType = tab.type;
@@ -650,21 +657,23 @@ export default {
       // 文字宽度
       state.tabTextWidth = $("#" + tab.id).width() + "px";
       // 检查列表第一项是否有值
-      if (tab?.data[0]?.list) {
+      // if (tab?.data[0]?.list) {
-        let list = tab.data[0].list;
+      //   let list = tab.data[0].list;
-        state.userList = list;
+      //   state.userList = list;
-        state.checkedUserList = list
+      //   state.checkedUserList = list
-          .filter(ele => {
+      //     .filter(ele => {
-            return ele.checked;
+      //       return ele.checked;
-          })
+      //     })
-          .map(ele => {
+      //     .map(ele => {
-            return ele.id;
+      //       return ele.id;
-          });
+      //     });
-      }
+      // }
     };
     const handleTabContentClick = (tab, event) => {
       // 侧边栏Tab点击回调
+      // console.log(state.activeTabContent);
+      // console.log(tab);
       // console.log(event);
       state.tabSelectData.forEach(ele => {
         if (ele.label === tab.props.label) {
@@ -692,6 +701,7 @@ export default {
             return ele.id;
           });
         // console.warn(state.checkedUserList);
+        state.currentNodeKey = [data.id];
       }
     };
@@ -744,8 +754,12 @@ export default {
       });
       // 合并成一维数组列表
       userList = [...userList.flat()];
+      // 如果ID相同，需要数据去重
+      let uniqueArray = userList.filter((value, index, self) =>
+        index === self.findIndex(obj => obj.id === value.id)
+      );
       // 勾选变化后同步到选中列表
-      state.userTags = userList
+      state.userTags = uniqueArray
         .filter(ele => {
           return ele.checked;
         })
@@ -823,10 +837,26 @@ export default {
         .filter(ele => ele.checked)
         .map(ele => ele.id);
     };
+    const checkUserStatus = () => {
+      // 在搜索框中同步显示tag框选中的用户
+      state.userTags.forEach(ele => {
+        state.userList.forEach(item => {
+          if (ele.id === item.id) {
+            item.checked = true;
+          }
+        });
+      });
+      // 显示选中tags的用户
+      state.checkedUserList = state.userList
+        .filter(ele => ele.checked)
+        .map(ele => ele.id);
+    };
     const onClearSearch = () => {
       // 清空搜索回调
       state.is_active_search = !state.is_active_search;
+      // 同步显示tag框选中的用户
+      checkUserStatus();
     };
     const onSearch = () => {
       // TODO: 搜索回调
@@ -834,7 +864,7 @@ export default {
         {
           id: "user-1-1",
           label: "用户1-1",
-          checked: true,
+          checked: false,
           disabled: false
         },
         {
@@ -849,24 +879,6 @@ export default {
           checked: false,
           disabled: true
         },
-        {
-          id: "role-1-2",
-          label: "选项 A",
-          checked: false,
-          disabled: false
-        },
-        {
-          id: "role-1-3",
-          label: "选项 B",
-          checked: true,
-          disabled: false
-        },
-        {
-          id: "role-1-4",
-          label: "选项 C",
-          checked: false,
-          disabled: true
-        }
       ];
       // console.log(state.userTags);
       checkSearchStatus();