ant-design-vue/components/tree-select/demo/treeData.md

70 lines
1.3 KiB
Markdown
Raw Normal View History

2018-07-11 09:51:20 +00:00
<cn>
#### 从数据直接生成
使用 `treeData` 把 JSON 数据直接生成树结构。
</cn>
<us>
#### Generate form tree data
The tree structure can be populated using `treeData` property. This is a quick and easy way to provide the tree content.
</us>
2019-10-09 10:32:23 +00:00
```tpl
2018-07-11 09:51:20 +00:00
<template>
<a-tree-select
style="width: 300px"
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
:treeData="treeData"
2019-09-28 12:45:07 +00:00
placeholder="Please select"
2018-07-11 09:51:20 +00:00
treeDefaultExpandAll
v-model="value"
>
<span style="color: #08c" slot="title" slot-scope="{key, value}" v-if="key='0-0-1'">
2019-02-23 10:53:02 +00:00
Child Node1 {{value}}
2018-07-11 09:51:20 +00:00
</span>
</a-tree-select>
</template>
<script>
2019-09-28 12:45:07 +00:00
const treeData = [
{
title: 'Node1',
value: '0-0',
key: '0-0',
children: [
{
value: '0-0-1',
key: '0-0-1',
scopedSlots: {
// custom title
title: 'title',
},
},
{
title: 'Child Node2',
value: '0-0-2',
key: '0-0-2',
},
],
2018-07-11 09:51:20 +00:00
},
2019-09-28 12:45:07 +00:00
{
title: 'Node2',
value: '0-1',
key: '0-1',
2018-07-11 09:51:20 +00:00
},
2019-09-28 12:45:07 +00:00
];
export default {
data() {
return {
value: undefined,
treeData,
};
},
watch: {
value(value) {
console.log(value);
},
},
};
2018-07-11 09:51:20 +00:00
</script>
```