tiny-vue/examples/sites/demos/mobile-first/app/select/nest-radio-tree.vue

73 lines
1.3 KiB
Vue

<template>
<div class="demo-select">
<tiny-select
v-model="treeRadio"
value-field="id"
text-field="label"
render-type="tree"
:tree-op="treeOp"
placeholder="请选择"
title="标题"
></tiny-select>
</div>
</template>
<script>
import { Select } from '@opentiny/vue'
export default {
components: {
TinySelect: Select
},
data() {
return {
treeRadio: 10,
treeOp: {
data: [
{
id: 1,
label: '一级 1',
children: [
{
id: 4,
label: '二级 1-1',
children: [
{
id: 9,
label: '三级 1-1-1'
},
{
id: 10,
label: '三级 1-1-2'
}
]
}
]
},
{
id: 2,
label: '一级 2',
children: [
{
id: 5,
label: '二级 2-1'
},
{
id: 6,
label: '二级 2-2'
}
]
}
]
}
}
}
}
</script>
<style scoped>
.demo-select .tiny-select {
width: 270px;
}
</style>