如何展示设计好的表单

进入此文档说明你已经了解了设计器的基本属性，已经可以成功开始使用了。

前言

随着本项目使用的人增多，这几天陆续有同学问我关于展示的问题，无论是表单的展示还是设计器的展示示例如下。

表单的展示

<template>
  <div style="padding: 20px">
    <avue-form :option="option"
               v-model="form"></avue-form>
  </div>
</template>

<script>

export default {
  data() {
    return {
      form: {},
      option: {}
    }
  },
  mounted() {
    // 模拟请求
    const loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    setTimeout(() => {
      // 假如这是请求来的js配置（string格式）
      const option = `{column:[{title:'警告',component:'el-alert',labelWidth:'0px',span:24,tips:'看我：自定义事件怎么用？',params:{title:'警告警告警告警告',type:'success'},event:{close:() => {console.log("alert关闭事件")}},prop:'1604994693264_45719'},{type:'input',label:'单行文本',span:24,display:true,prop:'1604994714440_81340'},{type:'textarea',label:'多行文本',span:24,display:true,prop:'1604994716622_2069'},{type:'checkbox',label:'多选框组',dicData:[{label:'选项一',value:'0'},{label:'选项二',value:'1'},{label:'选项三',value:'2'}],span:24,display:true,props:{label:'label',value:'value'},prop:'1604994720075_23876'}],labelPosition:'left',labelSuffix:'：',labelWidth:120,gutter:0,menuBtn:true,submitBtn:true,submitText:'提交',emptyBtn:true,emptyText:'清空',menuPosition:'center'}` 
      this.option = eval("(" + option + ")")
      loading.close()
    }, 1500);
  }
}
</script>

设计器的展示

<template>
  <div style="padding: 20px">
    <el-button size="mini"
               @click="type = 'form'">预览表单</el-button>
    <el-button size="mini"
               @click="type = 'design'">继续设计</el-button>
    <avue-form v-if="type == 'form'"
               :option="option"
               v-model="form"></avue-form>

    <avue-form-design v-if="type == 'design'"
                      :options="option"></avue-form-design>
  </div>
</template>

<script>

export default {
  data() {
    return {
      form: {},
      option: {},
      type: 'design'
    }
  },
  mounted() {
    // 模拟请求
    const loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    setTimeout(() => {
      // 假如这是请求来的js配置(string格式)
      const option = `{column:[{title:'警告',component:'el-alert',labelWidth:'0px',span:24,tips:'看我：自定义事件怎么用？',params:{title:'警告警告警告警告',type:'success'},event:{close:() => {console.log("alert关闭事件")}},prop:'1604994693264_45719'},{type:'input',label:'单行文本',span:24,display:true,prop:'1604994714440_81340'},{type:'textarea',label:'多行文本',span:24,display:true,prop:'1604994716622_2069'},{type:'checkbox',label:'多选框组',dicData:[{label:'选项一',value:'0'},{label:'选项二',value:'1'},{label:'选项三',value:'2'}],span:24,display:true,props:{label:'label',value:'value'},prop:'1604994720075_23876'}],labelPosition:'left',labelSuffix:'：',labelWidth:120,gutter:0,menuBtn:true,submitBtn:true,submitText:'提交',emptyBtn:true,emptyText:'清空',menuPosition:'center'}`
      this.option = eval("(" + option + ")")
      loading.close()
    }, 1500);
  }
}
</script>