<!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>