给个示例
时间: 2024-02-04 07:02:42 浏览: 12
好的,下面给出一个简单的 Treeselect 示例:
```
<template>
<a-treeselect
:options="options"
v-model="selectedValues"
:multiple="true"
placeholder="请选择"
/>
</template>
<script>
export default {
data() {
return {
options: [
{
id: 1,
label: "一级菜单1",
children: [
{
id: 11,
label: "二级菜单1-1",
},
{
id: 12,
label: "二级菜单1-2",
},
],
},
{
id: 2,
label: "一级菜单2",
children: [
{
id: 21,
label: "二级菜单2-1",
},
{
id: 22,
label: "二级菜单2-2",
},
],
},
],
selectedValues: [],
};
},
};
</script>
```
在上面的示例中,我们创建了一个 Treeselect 组件,通过 `:options` 属性传入树形数据源,通过 `v-model` 双向绑定选中的值,通过 `:multiple` 属性设置支持多选,通过 `placeholder` 属性设置未选择时的占位符。当用户选择或取消选择选项时,`selectedValues` 数据会自动更新。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)