<!DOCTYPE html>
<html>
<head>
<title>表单设计器kcz</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="//unpkg.com/k-form-design/lib/k-form-design.css">
</head>
<body>
<div id="app">
<k-form-build ref="kfb" :value="jsonData"></k-form-build>
<button @click="handleChange">修改数据</button>
<button @click="handleReset">重置表单</button>
</div>
<script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script src="http://cdn.kcz66.com/vue.min.js"></script> -->
<script src="//unpkg.com/k-form-design/lib/k-form-design.umd.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> -->
<script>
let jsonData = {
list: [
{
type: 'input',
label: '单行文本',
options: {
width: '100%',
defaultValue: '',
placeholder: '请输入',
disabled: false
},
model: 'input_1577875678405',
key: 'input_1577875678405',
rules: [{ required: true, message: '必填项' }]
},
{
type: 'date',
label: '日期选择器',
options: {
width: '100%',
defaultValue: '',
range: false,
showTime: false,
disabled: false,
clearable: false,
placeholder: '请选择',
rangePlaceholder: ['开始时间', '结束时间'],
format: 'YYYY-MM-DD'
},
model: 'date_1577877450971',
key: 'date_1577877450971',
rules: [{ required: true, message: '必填项' }]
},
{
type: 'textarea',
label: '多行文本',
options: {
width: '100%',
minRows: 4,
maxRows: 6,
defaultValue: '',
disabled: false,
placeholder: '请输入'
},
model: 'textarea_1577877446659',
key: 'textarea_1577877446659',
rules: [{ required: true, message: '必填项' }]
},
{
type: 'rate',
label: '评分',
options: {
defaultValue: 0,
max: 5,
disabled: false,
allowHalf: false
},
model: 'rate_1577877468717',
key: 'rate_1577877468717',
rules: [{ required: true, message: '必填项' }]
}
],
config: {
layout: 'horizontal',
labelCol: { span: 4 },
wrapperCol: { span: 18 },
hideRequiredMark: false,
customStyle: ''
}
}
let vm = new Vue({
el: '#app',
data: {
jsonData
},
methods: {
handleChange () {
// 使用k-form-design组件的form属性修改表单数据
this.$refs.kfb.form.setFieldsValue({
input_1577875678405: '设置input值',
date_1577877450971: '2019-11-12',
textarea_1577877446659: '设置textarea值',
rate_1577877468717: 3
})
},
handleReset(){
// 重置表单
this.$refs.kfb.reset()
}
}
})
</script>
</body>
</html>