elementui tree省市区
时间: 2024-01-03 09:22:30 浏览: 24
elementUI是一套基于Vue.js的桌面端组件库,提供了丰富的UI组件,其中包括了tree树形控件。在elementUI中,可以使用tree组件来展示省市区信息。
以下是一个使用elementUI tree组件展示省市区信息的示例代码:
```html
<template>
<el-tree
:data="treeData"
:props="treeProps"
:expand-on-click-node="false"
node-key="id"
default-expand-all
></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: '省1',
children: [
{
id: 11,
label: '市1-1',
children: [
{
id: 111,
label: '区1-1-1'
},
{
id: 112,
label: '区1-1-2'
}
]
},
{
id: 12,
label: '市1-2',
children: [
{
id: 121,
label: '区1-2-1'
},
{
id: 122,
label: '区1-2-2'
}
]
}
]
},
{
id: 2,
label: '省2',
children: [
{
id: 21,
label: '市2-1',
children: [
{
id: 211,
label: '区2-1-1'
},
{
id: 212,
label: '区2-1-2'
}
]
},
{
id: 22,
label: '市2-2',
children: [
{
id: 221,
label: '区2-2-1'
},
{
id: 222,
label: '区2-2-2'
}
]
}
]
}
],
treeProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
```
在上述代码中,我们使用了`el-tree`组件来展示省市区信息。`treeData`是一个数组,包含了省市区的层级关系和名称。`treeProps`是一个对象,用于指定`el-tree`组件的数据结构。
通过以上代码,我们可以实现一个简单的elementUI tree树形控件展示省市区信息的功能。