Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
vue-flow-editor
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2023-10-31 18:08:32 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
6098993afd0722f68ec0e81146558c099be00fd7
6098993a
1 parent
cc365183
fix 如果选中项ID相同需要去重
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
50 additions
and
38 deletions
doc/App.vue
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
",
label: "
选项 A
",
checked:
fals
e,
id: "
user-1-1
",
label: "
用户1-1
",
checked:
tru
e,
disabled: false
},
{
id: "
role-1-3
",
label: "
选项 B
",
checked:
tru
e,
id: "
user-2-2
",
label: "
用户2-2
",
checked:
fals
e,
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) {
let list = tab.data[0].list;
state.userList = list;
state.checkedUserList = list
.filter(ele => {
return ele.checked;
})
.map(ele => {
return ele.id;
});
}
//
if (tab?.data[0]?.list) {
//
let list = tab.data[0].list;
//
state.userList = list;
//
state.checkedUserList = list
//
.filter(ele => {
//
return ele.checked;
//
})
//
.map(ele => {
//
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 = u
serList
state.userTags = u
niqueArray
.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:
tru
e,
checked:
fals
e,
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();
...
...
Please
register
or
login
to post a comment