console
new Vue({
el: "#app",
data: {
options: {
formData: {
city: '',
citys: ''
},
formItem: [
{
type: 'select',
key: 'city',
children: [
{
label: '天津',
value: 'tianjin'
},
{
value: 'shenzhen',
disabled: true,
label: '深圳'
},
{
label: '韶关',
value: 'shaoguan'
},
],
events: {
'on-change': () => {
console.log('这是一个测试')
}
}
},
{
type: 'select',
key: 'citys',
children: [
{
type: 'optionGroup',
label: '城市',
// 子项可以省略type: 'option'
// 并且提供了简写方式 可以直接写props的属性 而不用像下面这样使用
// props: {
// value: 'tj',
// label: '天津'
// }
children: [
{
value: 'tj',
label: '天津'
}
]
},
{
value: 'shenzhen',
disabled: true,
label: '深圳'
},
{
label: '韶关',
value: 'shaoguan'
},
{
type: 'optionGroup',
label: '县',
children: [
{
value: 'xf',
label: '新丰'
}
]
},
]
},
]
}
}
})
<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>
<div id="app">
<vue-form-maker :options="options" />
</div>
#app {
padding: 10px 20px;
}