表单设计器form-marking的使用（二）

最新推荐文章于 2025-01-03 12:42:57 发布

山雨欲来枫满楼

最新推荐文章于 2025-01-03 12:42:57 发布

阅读量243

点赞数

文章标签： vue.js javascript 前端 elementui ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_44829594/article/details/132977541

版权

本文介绍如何在前端应用中实现自定义操作按钮及表单预览功能。通过Vue.js及其组件，展示了如何创建保存按钮并进行数据保存确认，同时实现了表单数据预览对话框，并详细说明了其交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义操作按钮和预览表单

<template>
   <div class="list-wraper previewForm">
     <fm-making-form 
       ref="makingform" 
       style="height: 670px;"
     >
      <template slot="action">
        <!-- 自定义操作区域插槽 -->
        <el-button type="text" icon="el-icon-upload" @click="saveData">保存</el-button>
        
        <!-- 预览 -->
        <el-dialog v-drag @click="previewHide" title="预览" :visible.sync="previewVisible" :close-on-click-modal="false" width="50%" style="width:100%;">
          <div class="demo-image__preview">
            <fm-generate-form
              :data="jsonData" 
              ref="generateForm"
              @on-change="handleDataChange"
            >
            </fm-generate-form>
            
            <templete slot="footer" class="dialog-footer" align="center">
              <div>
                <el-button @click="previewVisible = false">取 消</el-button>
                <el-button type="primary" @click="previewVisible = false">确 定</el-button>
              </div>
            </templete>
          </div>
        </el-dialog>
      </template>
    </fm-making-form>
  </div>
</template>

<script>

export default {
  data () {
    return {
      previewVisible: false,
      jsonData: {},// 渲染表单的JSON数据
      editData: {},// 表单内部的值
      remoteFuncs: {
        // 远程方法
      },
    }
  },
  methods: {
    saveData() {
      this.$confirm('是否确定保存表单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // this.$refs.makingform.widgetForm    当前设计的form表单的json数据
        // this.$refs.makingform.jsonCopyValue 当前设计的form表单的点击生成json后得到的数据
        this.jsonData = this.$refs.makingform.widgetForm
        this.previewVisible = true;// 保存后预览表单
        console.log(this.$refs.generateForm)
      }).catch(() => {
        console.log('取消')
      });
    },
    previewHide() {
      this.previewVisible = false;
    },
    handleDataChange (field, value, data) {
      console.log(field, value, data)
    }
  },
}
</script>