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

82 lines
1.4 KiB
Markdown
Raw Normal View History

2018-07-11 09:51:20 +00:00
<cn>
#### 可勾选
使用勾选框实现多选功能。
</cn>
<us>
#### Checkable
Multiple and checkable.
</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"
:treeData="treeData"
:value="value"
@change="onChange"
treeCheckable
:showCheckedStrategy="SHOW_PARENT"
2019-09-28 12:45:07 +00:00
searchPlaceholder="Please select"
2018-07-11 09:51:20 +00:00
/>
</template>
<script>
2019-09-28 12:45:07 +00:00
import { TreeSelect } from 'ant-design-vue';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
2018-07-11 09:51:20 +00:00
2019-09-28 12:45:07 +00:00
const treeData = [
{
title: 'Node1',
value: '0-0',
key: '0-0',
children: [
{
title: 'Child Node1',
value: '0-0-0',
key: '0-0-0',
},
],
2018-07-11 09:51:20 +00:00
},
2019-09-28 12:45:07 +00:00
{
title: 'Node2',
value: '0-1',
key: '0-1',
children: [
{
title: 'Child Node3',
value: '0-1-0',
key: '0-1-0',
disabled: true,
},
{
title: 'Child Node4',
value: '0-1-1',
key: '0-1-1',
},
{
title: 'Child Node5',
value: '0-1-2',
key: '0-1-2',
},
],
},
];
export default {
data() {
return {
value: ['0-0-0'],
treeData,
SHOW_PARENT,
};
},
methods: {
onChange(value) {
console.log('onChange ', value);
this.value = value;
},
},
};
2018-07-11 09:51:20 +00:00
</script>
```