Skip to content

Commit 21a3294

Browse files
iotjiniotjin
committed
feat: 更新demos
1 parent 391b46a commit 21a3294

File tree

7 files changed

+128
-9
lines changed

7 files changed

+128
-9
lines changed

‎src/lang/routes/en.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ export default {
1515
Home3: 'Home3',
1616
// table
1717
Table: 'Table',
18-
Table1: 'Table1',
18+
Table1: 'Table1 - Example',
19+
Table2: 'Table2 - Dynamic Table',
1920
// components
2021
Component: 'Component',
2122
'Icon Selector': 'Icon Selector',
@@ -34,6 +35,7 @@ export default {
3435
Other1: 'Other1',
3536
Other2: 'Other2',
3637
Other3: 'Other3',
38+
Other4: 'Other4',
3739
// nested
3840
Nested: 'Nested',
3941
Menu1: 'Menu1',

‎src/lang/routes/zh-cn.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ export default {
1515
Home3: '首页3',
1616
// table
1717
Table: '表格',
18-
Table1: '表格1',
18+
Table1: '表格1 - 综合示例',
19+
Table2: '表格2 - 动态表格',
1920
// components
2021
Component: '组件',
2122
'Icon Selector': '图标选择器',
@@ -34,6 +35,7 @@ export default {
3435
Other1: '其它1',
3536
Other2: '其它2',
3637
Other3: '其它3',
38+
Other4: '其它4',
3739
// nested
3840
Nested: '多级菜单',
3941
Menu1: '菜单1',

‎src/layout/components/Sidebar/SidebarItem.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<!-- 只包含一个子路由节点的路由，显示其【唯一子路由】 -->
44
<template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren)">
55
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
6-
<el-tooltip effect="dark" :disabled="disabledTooltip" :content="onlyOneChild.meta.title" placement="right" :offset="12" :enterable="true">
6+
<el-tooltip effect="dark" :disabled="disabledTooltip" :content="translateRouteTitleI18n(onlyOneChild.meta.title)" placement="right" :offset="12" :enterable="true">
77
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'menu-item-custom': isCollapse }">
88
<Icon v-if="isIconify(onlyOneChild.meta)" :icon="onlyOneChild.meta.icon" class="svg-icon" />
99
<svg-icon v-if="isSVGIcon(onlyOneChild.meta)" :icon-class="onlyOneChild.meta.icon" />
@@ -20,7 +20,7 @@
2020
<template #title>
2121
<Icon v-if="isIconify(item.meta)" :icon="item.meta.icon" class="svg-icon" />
2222
<svg-icon v-if="isSVGIcon(item.meta)" :icon-class="item.meta.icon" />
23-
<el-tooltip effect="dark" :disabled="disabledTooltip" :content="onlyOneChild.meta.title" placement="right" :offset="12" :enterable="true">
23+
<el-tooltip effect="dark" :disabled="disabledTooltip" :content="translateRouteTitleI18n(onlyOneChild.meta.title)" placement="right" :offset="12" :enterable="true">
2424
<span v-if="item.meta && item.meta.title" class="sle" @mouseenter="handleMouse($event)">{{ translateRouteTitleI18n(item.meta.title) }}</span>
2525
</el-tooltip>
2626
</template>

‎src/router/modules/others.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,12 @@ const othersRouter: AppRouteType = {
3030
name: 'other3',
3131
component: () => import('@/views/demos/others/other3.vue'),
3232
meta: { title: 'Other3', icon: 'ep:grid', hidden: false }
33+
},
34+
{
35+
path: 'other4',
36+
name: 'other4',
37+
component: () => import('@/views/demos/others/other4.vue'),
38+
meta: { title: 'Other4', icon: 'ep:grid', hidden: false }
3339
}
3440
]
3541
}

‎src/router/modules/tables.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,15 @@ const othersRouter: AppRouteType = {
1717
path: 'table1',
1818
name: 'table1',
1919
component: () => import('@/views/demos/tables/table1/index.vue'),
20-
meta: { title: 'table1 - 综合示例', icon: 'ep:grid' }
20+
// meta: { title: 'table1 - 综合示例', icon: 'ep:grid' }
21+
meta: { title: 'Table1', icon: 'ep:grid' }
2122
},
2223
{
2324
path: 'table2',
2425
name: 'table2',
2526
component: () => import('@/views/demos/tables/table2/index.vue'),
26-
meta: { title: 'table2 - 动态表格', icon: 'ep:grid' }
27+
// meta: { title: 'table2 - 动态表格', icon: 'ep:grid' }
28+
meta: { title: 'Table2', icon: 'ep:grid' }
2729
},
2830
{
2931
path: 'table3',

‎src/views/demos/others/other3.vue‎

Lines changed: 101 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,107 @@
11
<template>
22
<div>
3-
<div>other3</div>
3+
<div v-for="(group, index) in groupList" :key="group.groupName + index">
4+
<!-- 组复选框 -->
5+
<el-checkbox v-model="group.selected" :indeterminate="isIndeterminate(group)" @change="handleCheckAllChange(group, $event)">
6+
{{ group.groupName }}
7+
</el-checkbox>
8+
9+
<!-- 子项的 checkbox -->
10+
<div>
11+
<el-checkbox-group v-model="selectedList">
12+
<div v-for="(item, index2) in group.itemList" :key="item.value + index2" style="padding-left: 20px">
13+
<el-checkbox :label="item.label" :value="item.value" @change="handleCheckChange(group, index, $event)" />
14+
</div>
15+
</el-checkbox-group>
16+
</div>
17+
<!-- 子项样式二 -->
18+
<div class="box-card">
19+
<el-checkbox-group v-model="selectedList">
20+
<span v-for="(item, index2) in group.itemList" :key="item.value + index2" style="padding-left: 20px">
21+
<el-checkbox :label="item.label" :value="item.value" @change="handleCheckChange(group, index, $event)" />
22+
</span>
23+
</el-checkbox-group>
24+
</div>
25+
</div>
26+
27+
<div style="margin-top: 20px">
28+
<el-button type="primary" @click="handleGetSelectedList">获取选中的值</el-button>
29+
</div>
430
</div>
531
</template>
632

7-
<script setup lang="ts"></script>
33+
<script setup lang="ts">
34+
type GroupItemType = {
35+
label: string
36+
value: string
37+
}
38+
39+
type GroupListType = {
40+
groupName: string
41+
selected: boolean
42+
itemList: GroupItemType[]
43+
}
44+
45+
const state = reactive({
46+
groupList: [
47+
{
48+
groupName: 'BB',
49+
selected: false, // 初始选中状态
50+
itemList: [
51+
{ label: 'test name1', value: '11' },
52+
{ label: 'test name2', value: '22' },
53+
{ label: 'test name3', value: '33' },
54+
{ label: 'test name4', value: '44' },
55+
{ label: 'test name5', value: '55' }
56+
]
57+
},
58+
{
59+
groupName: 'AA',
60+
selected: false, // 初始选中状态
61+
itemList: [
62+
{ label: 'test name6', value: '66' },
63+
{ label: 'test name7', value: '77' },
64+
{ label: 'test name8', value: '88' },
65+
{ label: 'test name9', value: '99' },
66+
{ label: 'test name10', value: '100' }
67+
]
68+
}
69+
] as GroupListType[],
70+
// 用于存储选中的 checkbox 值
71+
selectedList: [] as string[]
72+
})
73+
const { groupList, selectedList } = toRefs(state)
74+
75+
function handleCheckAllChange(group: GroupListType, selected: boolean) {
76+
// 选中时，将该组内所有 itemList 的 value 添加到 selectedList 中，注意去重
77+
if (selected) {
78+
state.selectedList = [...new Set([...state.selectedList, ...group.itemList.map((item) => item.value)])]
79+
} else {
80+
// 取消选中时，将该组内所有 itemList 的 value 从 selectedList 中移除
81+
state.selectedList = state.selectedList.filter((value) => !group.itemList.map((item) => item.value).includes(value))
82+
}
83+
}
84+
// 判断当前组的复选框是否是部分选中（indeterminate）
85+
function isIndeterminate(group: GroupListType) {
86+
const itemList = group.itemList || []
87+
const selectedInGroup = itemList.filter((item) => state.selectedList.includes(item.value))
88+
return selectedInGroup.length > 0 && selectedInGroup.length < itemList.length
89+
}
90+
function handleCheckChange(group: GroupListType, index: number, selected: boolean) {
91+
// 更新当前组的 全选/取消全选 状态
92+
group.selected = group.itemList.every((item) => state.selectedList.includes(item.value))
93+
}
94+
function handleGetSelectedList() {
95+
console.log('selectedList', JSON.stringify(state.selectedList))
96+
}
97+
</script>
898

9-
<style lang="scss" scoped></style>
99+
<style lang="scss" scoped>
100+
.box-card {
101+
margin: 10px;
102+
padding: 10px 15px;
103+
border-radius: 5px;
104+
box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.1);
105+
border-bottom: 1px solid #e6e6e6;
106+
}
107+
</style>

‎src/views/demos/others/other4.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<div>
3+
<div>other4</div>
4+
</div>
5+
</template>
6+
7+
<script setup lang="ts"></script>
8+
9+
<style lang="scss" scoped></style>

0 commit comments

Comments
 (0)