使用el-select 嵌套 tree 树形控件
时间: 2023-11-02 07:07:22 浏览: 113
Tree树形控件
要使用el-select嵌套tree树形控件,您可以使用Element UI提供的el-cascader组件来实现。el-cascader是一个级联选择器,可以将树形结构的数据展示为多级选择框。您可以通过配置el-cascader的options属性来设置树形数据源,然后根据需要设置其他属性,例如placeholder、value、clearable等。使用el-cascader的时候,可以通过设置show-all-levels属性为true来显示所有层级的选项。
以下是一个使用el-select嵌套tree树形控件的示例代码:
```
<template>
<el-cascader
v-model="selectedOptions"
:options="treeData"
show-all-levels
clearable
placeholder="请选择"
></el-cascader>
</template>
<script>
export default {
data() {
return {
selectedOptions: [], // 选中的选项
treeData: [ // 树形数据
{
value: '1',
label: '选项1',
children: [
{
value: '11',
label: '选项1-1',
children: [
{
value: '111',
label: '选项1-1-1',
},
{
value: '112',
label: '选项1-1-2',
},
],
},
{
value: '12',
label: '选项1-2',
},
],
},
{
value: '2',
label: '选项2',
},
],
};
},
};
</script>
```
阅读全文