naive-ui/demo/debugComponents/cascaderDebug/basic.demo.vue

67 lines
1.3 KiB
Vue
Raw Normal View History

2019-08-27 11:19:53 +08:00
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Multiple
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-cascader
v-model="value"
multiple
placeholder="Please Select Something"
:options="options"
style="flex-grow: 1; margin-right: 12px;"
2019-08-28 17:02:40 +08:00
lazy
:on-load="handleLoad"
2019-08-27 11:19:53 +08:00
/>
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect">v-model: {{ JSON.stringify(value) }}</pre>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
2019-08-28 17:02:40 +08:00
function genChildren (option) {
const children = []
for (let i = 0; i <= option.depth; ++i) {
children.push({
label: option.label + '_' + i,
value: option.label + '_' + i,
isLeaf: option.depth === 3
})
2019-08-27 11:19:53 +08:00
}
2019-08-28 17:02:40 +08:00
return children
2019-08-27 11:19:53 +08:00
}
2019-08-28 17:02:40 +08:00
const options = [
{
label: 'China',
value: 'china',
isLeaf: false
}
]
2019-08-27 11:19:53 +08:00
export default {
data () {
return {
value: null,
2019-08-28 17:02:40 +08:00
options: options
}
},
methods: {
handleLoad (option, resolve) {
console.log(option)
window.setTimeout(() => {
resolve(genChildren(option))
}, 1000)
2019-08-27 11:19:53 +08:00
}
}
}
</script>