折叠面板组件 (Collapse)
# 折叠面板组件 (Collapse)
Element-UI 的 Collapse
组件用于在有限的空间内展示内容,通过折叠和展开的方式节省空间。可以通过手风琴模式和普通模式管理多个面板的展开状态。
提示
Collapse 折叠面板组件官方文档:https://element.eleme.cn/#/zh-CN/component/collapse (opens new window)
# 1. 基本用法
基本语法:使用 <el-collapse>
标签作为容器,内部包含多个 <el-collapse-item>
,每个 el-collapse-item
都表示一个可折叠的面板。
<template>
<el-collapse v-model="activeNames">
<el-collapse-item title="面板 1" name="1">
<p>面板 1 的内容</p>
</el-collapse-item>
<el-collapse-item title="面板 2" name="2">
<p>面板 2 的内容</p>
</el-collapse-item>
<el-collapse-item title="面板 3" name="3" :disabled="true">
<p>面板 3 的内容(已禁用)</p>
</el-collapse-item>
</el-collapse>
</template>
<script>
export default {
data() {
return {
activeNames: ['1'] // 当前激活的面板,可以是字符串或数组
};
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
v-model
绑定:通过v-model
绑定当前激活的面板。若为多选模式,绑定值应为数组;若为手风琴模式,绑定值应为字符串。- 面板标题:通过
title
属性设置每个面板的标题。 - 禁用面板:使用
disabled
属性禁用某个面板,使其不可展开或折叠。
# Collapse 属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value / v-model | 当前激活的面板。如果是手风琴模式,绑定值类型为 string ,否则为 array 。 | string / array | — | — |
accordion | 是否手风琴模式 | boolean | — | false |
# Collapse 方法
Collapse 组件本身没有特定的方法,主要通过 v-model
和事件来控制其行为。
# Collapse 事件
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 当前激活面板改变时触发。如果是手风琴模式,参数类型为 string ,否则为 array 。 | activeNames: array / string |
# Collapse-Item 属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
name | 面板唯一标志符 | string / number | — | — |
title | 面板标题 | string | — | — |
disabled | 是否禁用 | boolean | — | false |
# 2. 面板常用示例
# 手风琴模式
通过设置 accordion
属性为 true
,使得每次只能展开一个面板,这种模式下 v-model
绑定的值为 string
类型。
<template>
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="面板 1" name="1">
<p>面板 1 的内容</p>
</el-collapse-item>
<el-collapse-item title="面板 2" name="2">
<p>面板 2 的内容</p>
</el-collapse-item>
<el-collapse-item title="面板 3" name="3">
<p>面板 3 的内容</p>
</el-collapse-item>
</el-collapse>
</template>
<script>
export default {
data() {
return {
activeName: '1' // 当前激活的面板,手风琴模式下为字符串
};
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
- 手风琴模式:在
el-collapse
中添加accordion
属性,确保每次只有一个面板展开。 - 绑定值类型:在手风琴模式下,
v-model
绑定的值应为string
类型。
# 监听面板变化
通过监听 change
事件来执行某些操作,例如记录用户的选择或根据激活的面板做出相应的处理。
<template>
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="面板 1" name="1">
<p>面板 1 的内容</p>
</el-collapse-item>
<el-collapse-item title="面板 2" name="2">
<p>面板 2 的内容</p>
</el-collapse-item>
<el-collapse-item title="面板 3" name="3">
<p>面板 3 的内容</p>
</el-collapse-item>
</el-collapse>
</template>
<script>
export default {
data() {
return {
activeNames: ['1'] // 当前激活的面板,为数组类型
};
},
methods: {
handleChange(activeNames) {
console.log('当前激活的面板:', activeNames);
}
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
change
事件:每当激活的面板发生变化时,change
事件会触发,并传递当前激活的面板标识符。- 回调参数:手风琴模式下回调参数为
string
,多选模式下为array
。
# 禁用面板
通过 disabled
属性禁用某个面板,使其无法展开或折叠。
<template>
<el-collapse v-model="activeNames">
<el-collapse-item title="面板 1" name="1">
<p>面板 1 的内容</p>
</el-collapse-item>
<el-collapse-item title="面板 2" name="2">
<p>面板 2 的内容</p>
</el-collapse-item>
<el-collapse-item title="面板 3" name="3" :disabled="true">
<p>面板 3 的内容(已禁用)</p>
</el-collapse-item>
</el-collapse>
</template>
<script>
export default {
data() {
return {
activeNames: ['1'] // 当前激活的面板
};
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
- 禁用面板:通过
disabled
属性禁用某个面板,使其不可被用户操作。
# 自定义面板标题
除了通过 title
属性设置面板标题,还可以通过具名 slot
来实现更灵活的自定义面板标题内容,如增加图标、按钮等。
<template>
<el-collapse v-model="activeNames">
<el-collapse-item name="1">
<!-- 使用 slot 自定义标题内容 -->
<template v-slot:title>
<span>自定义标题 1</span>
<i class="el-icon-info"></i>
</template>
<p>面板 1 的内容</p>
</el-collapse-item>
<el-collapse-item name="2">
<template v-slot:title>
<span>自定义标题 2</span>
<i class="el-icon-warning"></i>
</template>
<p>面板 2 的内容</p>
</el-collapse-item>
</el-collapse>
</template>
<script>
export default {
data() {
return {
activeNames: ['1'] // 当前激活的面板
};
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
- 自定义标题:使用
slot
插槽来覆盖默认的标题内容,从而实现更多的自定义,例如添加图标、按钮等其他元素。
# 3. 总结
- 灵活的折叠模式:
Collapse
组件支持普通模式和手风琴模式,可以灵活展示和隐藏内容。 - 事件处理:通过
change
事件可以在面板状态变化时进行处理,提升交互性。 - 属性控制:通过
v-model
控制当前激活的面板,disabled
属性可以禁用某个面板。
编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08