forked from opentiny/tiny-vue
253 lines
5.6 KiB
Vue
253 lines
5.6 KiB
Vue
<template>
|
|
<div>
|
|
<div class="page__hd">
|
|
<h1 class="page__title">MultiSelect</h1>
|
|
<p class="page__desc">下拉选择器</p>
|
|
</div>
|
|
<div class="page__content">
|
|
<tiny-multi-select
|
|
ref="multiSelect"
|
|
:data-source="data"
|
|
:default-selected-array="defaultSelectedArray"
|
|
@confirm="confirm"
|
|
@reset="reset"
|
|
>
|
|
</tiny-multi-select>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="jsx">
|
|
import { MultiSelect } from '@opentiny/vue'
|
|
|
|
export default {
|
|
components: {
|
|
TinyMultiSelect: MultiSelect
|
|
},
|
|
data() {
|
|
return {
|
|
data: [
|
|
{
|
|
title: '时间',
|
|
hasFooter: true,
|
|
children: [
|
|
{
|
|
label: '2020年',
|
|
children: [
|
|
{
|
|
label: '2020全年',
|
|
children: [
|
|
{
|
|
label: '年'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '2020年Q1',
|
|
children: [
|
|
{
|
|
label: '2020年Q1一月'
|
|
},
|
|
{
|
|
label: '2020年Q1二月'
|
|
},
|
|
{
|
|
label: '2020年Q1三月'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '2020年Q2',
|
|
children: [
|
|
{
|
|
label: '2020年Q2四月'
|
|
},
|
|
{
|
|
label: '2020年Q2五月'
|
|
},
|
|
{
|
|
label: '2020年Q2六月'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '2021年',
|
|
children: [
|
|
{
|
|
label: '2021全年',
|
|
children: [
|
|
{
|
|
label: '年'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '2021年Q1',
|
|
children: [
|
|
{
|
|
label: '2021年Q1一月'
|
|
},
|
|
{
|
|
label: '2021年Q1二月'
|
|
},
|
|
{
|
|
label: '2021年Q1三月'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '2021年Q2',
|
|
children: [
|
|
{
|
|
label: '2021年Q2四月'
|
|
},
|
|
{
|
|
label: '2021年Q2五月'
|
|
},
|
|
{
|
|
label: '2021年Q2六月'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '2022年',
|
|
children: [
|
|
{
|
|
label: '2022全年',
|
|
children: [
|
|
{
|
|
label: '年'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '2022年Q1',
|
|
children: [
|
|
{
|
|
label: '2022年Q1一月'
|
|
},
|
|
{
|
|
label: '2022年Q1二月'
|
|
},
|
|
{
|
|
label: '2022年Q1三月'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '2022年Q2',
|
|
children: [
|
|
{
|
|
label: '2022年Q2四月'
|
|
},
|
|
{
|
|
label: '2022年Q2五月'
|
|
},
|
|
{
|
|
label: '2022年Q2六月'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: '区域',
|
|
hasFooter: true,
|
|
children: [
|
|
{
|
|
label: '海外',
|
|
children: [
|
|
{
|
|
label: '欧洲巴黎'
|
|
},
|
|
{
|
|
label: '巴基斯坦'
|
|
},
|
|
{
|
|
label: '土耳其'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '中国',
|
|
children: [
|
|
{
|
|
label: '北京'
|
|
},
|
|
{
|
|
label: '上海'
|
|
},
|
|
{
|
|
label: '南京'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: '云类型',
|
|
hasFooter: false,
|
|
children: [
|
|
{
|
|
label: '公有云'
|
|
},
|
|
{
|
|
label: '私有云'
|
|
},
|
|
{
|
|
label: '伙伴云'
|
|
},
|
|
{
|
|
label: '公有云1'
|
|
},
|
|
{
|
|
label: '公有云2'
|
|
}
|
|
]
|
|
}
|
|
],
|
|
defaultSelectedArray: []
|
|
}
|
|
},
|
|
methods: {
|
|
confirm(...arg) {
|
|
console.log(...arg)
|
|
},
|
|
reset(...arg) {
|
|
console.log(...arg)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page__hd {
|
|
padding: 40px;
|
|
}
|
|
|
|
.page__title {
|
|
font-weight: 400;
|
|
font-size: 21px;
|
|
text-align: left;
|
|
}
|
|
|
|
.page__desc {
|
|
margin-top: 5px;
|
|
color: #888;
|
|
font-size: 14px;
|
|
text-align: left;
|
|
}
|
|
|
|
.page__content {
|
|
width: 375px;
|
|
height: 48px;
|
|
background-color: #fff;
|
|
}
|
|
</style>
|