## 在线表单

### 基础用法

```html
<template>
  <cl-online-form
    ref="myOnlineForm"
    :html="html"
    :data="data"
    :permission="permission"
    :is-view="isView"
  />
  <el-button type="primary" @click="handleFormData">获取表单数据</el-button>
</template>
<script>
  import { getFormById } from "$exp/api/form.js";

  export default {
    data() {
      return {
        isView: false,
        html: null,
        data: null,
        permission: null,
      };
    },
    created() {
      getFormById("1448947021302403072").then((form) => {
        this.data = form.data;
        this.permission = form.permission;
        this.html = form.html;
      });
    },
    methods: {
      handleFormData() {
        this.$refs.myOnlineForm
          .getData(true)
          .then((data) => {
            this.$message(JSON.stringify(data, null, '\t'));
          })
          .catch((err) => {
            this.$message({ message: `表单上有字段未通过校验`, type: "error" });
          });
      },
    },
  };
</script>

<!-- online-1.vue -->
```
