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' }] }] }, { label: '一级 3', children: [{ label: '二级 3-1', children: [{ label: '三级 3-1-1' }] }, { label: '二级 3-2', children: [{ label: '三级 3-2-1' }] }] }], defaultProps: { children: 'children', label: 'label' }在vue3中的写法
时间: 2023-11-28 14:49:16 浏览: 32
在Vue 3中,如果要使用树形组件,可以使用`<Tree>`组件,其代码示例如下:
```html
<template>
<Tree :data="data" :props="defaultProps"></Tree>
</template>
<script>
import { defineComponent } from 'vue';
import Tree from 'element-plus/lib/el-tree';
export default defineComponent({
components: {
Tree
},
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'
}
]
}
]
},
{
label: '一级 3',
children: [
{
label: '二级 3-1',
children: [
{
label: '三级 3-1-1'
}
]
},
{
label: '二级 3-2',
children: [
{
label: '三级 3-2-1'
}
]
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
});
</script>
```
需要注意的是,需要使用`import Tree from 'element-plus/lib/el-tree';`导入`<Tree>`组件,同时需要在`components`中注册该组件。默认情况下,`<Tree>`组件的数据格式为:
```js
[
{
label: '节点1',
children: [
{
label: '节点1-1',
children: [
{
label: '节点1-1-1'
}
]
}
]
},
{
label: '节点2'
}
]
```
如果需要使用其他格式的数据,可以通过`props`属性进行设置,如上述示例中的`defaultProps`属性。