new Vue({
el: "#app",
data: {
options: {
formItem: [
{
type: 'cascader',
props: {
value: ['jiangsu', 'suzhou', 'zhuozhengyuan'],
data: [{
value: 'beijing',
label: '北京',
children: [
{
value: 'gugong',
label: '故宫'
},
{
value: 'tiantan',
label: '天坛'
},
{
value: 'wangfujing',
label: '王府井'
}
]
}, {
value: 'jiangsu',
label: '江苏',
children: [
{
value: 'nanjing',
label: '南京',
children: [
{
value: 'fuzimiao',
label: '夫子庙',
}
]
},
{
value: 'suzhou',
label: '苏州',
children: [
{
value: 'zhuozhengyuan',
label: '拙政园',
},
{
value: 'shizilin',
label: '狮子林',
}
]
}
],
}]
}
},
{
type: 'cascader',
props: {
data: cityData
}
}
]
}
}
})
<link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js">
</script>
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-form-maker/dist/vue-form-maker.js">
</script>
<!-- 定义了一个全局变量cityData 在项目里直接使用cityData即可 -->
<script src="https://cdn.jsdelivr.net/npm/vue-form-maker/dist/cityData3Level.js"></script>
<div id="app">
<vue-form-maker :options="options" />
</div>
#app {
padding: 10px 20px;
}