cd_form_editor_web/docs/zh-cn/components/form.md

k-form-build form属性

介绍

k-form-bulild有个this.form属性,可以用来修改表单值,参照Ant Design form的API

使用form属性修改表单value

filename

代码示例

<template>
  <div>
    <k-form-build ref="kfb" :value="jsonData" />
    <button @click="handleChange">修改数据</button>
    <button @click="handleReset">重置表单</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      jsonData: {
        list: [
          {
            type: 'input',
            name: '单行文本',
            options: {
              width: '100%',
              defaultValue: '',
              placeholder: '请输入',
              disabled: false
            },
            model: 'input_1577875678405',
            key: 'input_1577875678405',
            rules: [{ required: true, message: '必填项' }]
          },
          {
            type: 'date',
            name: '日期选择器',
            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',
            name: '多行文本',
            options: {
              width: '100%',
              minRows: 4,
              maxRows: 6,
              defaultValue: '',
              disabled: false,
              placeholder: '请输入'
            },
            model: 'textarea_1577877446659',
            key: 'textarea_1577877446659',
            rules: [{ required: true, message: '必填项' }]
          },
          {
            type: 'rate',
            name: '评分',
            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: ''
        }
      }
    }
  },
  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>