element UI列表嵌套
时间: 2023-08-30 08:05:14 浏览: 51
在 Element UI 中嵌套列表可以使用 `el-tree` 组件。该组件支持无限级别的嵌套,并且可以自定义每个节点的内容和展开/收起状态。
以下是一个简单的示例代码:
```html
<template>
<el-tree :data="data">
<template v-slot="{ node }">
<span>{{ node.label }}</span>
<el-button v-if="node.children" @click="handleExpand(node)">展开</el-button>
</template>
</el-tree>
</template>
<script>
export default {
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}]
}
},
methods: {
handleExpand(node) {
this.$refs.tree.$emit('node-expand', node)
}
}
}
</script>
```
在上述示例中,我们在 `el-tree` 组件中使用了一个 `template` 插槽来自定义每个节点的内容。同时,我们在节点中添加了一个按钮来展开或收起其子节点。当按钮被点击时,我们通过调用 `$emit` 方法来触发 `node-expand` 事件来实现展开或收起节点的功能。