element-plus/docs/examples/tree-select/multiple.vue
yujinpan 4fe9c2bd6c
fix(components): [TreeSelect] checkbox interaction (#8102)
* fix(components): [TreeSelect] check child when parent checked

* refactor(components): [TreeSelect] move utility functions to utils.ts

* fix(components): [TreeSelect] exclude check event from click node

* fix(components): [TreeSelect] handle dup when `checkOnClickNode`

* feat(components): [TreeSelect] `treeFind` support find parent node

* fix(components): [TreeSelect] show current selected node only first time

* fix(components): [TreeSelect] incorrect node selection condition

* docs(components): [TreeSelect] update checkbox examples and tips

* fix(components): [TreeSelect] incorrect label when data modify
2022-07-02 14:49:21 +08:00

107 lines
1.8 KiB
Vue

<template>
<el-tree-select
v-model="value"
:data="data"
multiple
:render-after-expand="false"
/>
<el-divider />
show checkbox:
<el-tree-select
v-model="value"
:data="data"
multiple
:render-after-expand="false"
show-checkbox
/>
<el-divider />
show checkbox with `check-strictly`:
<el-tree-select
v-model="valueStrictly"
:data="data"
multiple
:render-after-expand="false"
show-checkbox
check-strictly
check-on-click-node
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref()
const valueStrictly = ref()
const data = [
{
value: '1',
label: 'Level one 1',
children: [
{
value: '1-1',
label: 'Level two 1-1',
children: [
{
value: '1-1-1',
label: 'Level three 1-1-1',
},
],
},
],
},
{
value: '2',
label: 'Level one 2',
children: [
{
value: '2-1',
label: 'Level two 2-1',
children: [
{
value: '2-1-1',
label: 'Level three 2-1-1',
},
],
},
{
value: '2-2',
label: 'Level two 2-2',
children: [
{
value: '2-2-1',
label: 'Level three 2-2-1',
},
],
},
],
},
{
value: '3',
label: 'Level one 3',
children: [
{
value: '3-1',
label: 'Level two 3-1',
children: [
{
value: '3-1-1',
label: 'Level three 3-1-1',
},
],
},
{
value: '3-2',
label: 'Level two 3-2',
children: [
{
value: '3-2-1',
label: 'Level three 3-2-1',
},
],
},
],
},
]
</script>