chenc
/
cd_form_editor_web


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