Mr_HJ / form-generator项目学习-增加自定义的超融组件(一)

这篇具有很好参考价值的文章主要介绍了Mr_HJ / form-generator项目学习-增加自定义的超融组件(一)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio

演示地址:RuoYi-Nbcio后台管理系统

更多nbcio-boot功能请看演示系统

gitee源代码地址

后端代码: https://gitee.com/nbacheng/nbcio-boot

前端代码:https://gitee.com/nbacheng/nbcio-vue.git

在线演示(包括H5) : http://122.227.135.243:9888
 

尝试学习增加自己的一个超融组件,能支持数据库与字段,先把前端做好。

主要的流程如下:
1、utils\generator\config.js 中添加一个json

// 超融组件配置
    __config__: {
      label: '超融文本',
      labelWidth: null,
      showLabel: true,
      changeTag: true,
      tag: 'sf-input',
      tagIcon: 'sfinput',
      defaultValue: undefined,
      required: false,
      tableName: "",
      layout: 'colFormItem',
      span: 24,
      document: 'https://element.eleme.cn/#/zh-CN/component/input',
      // 正则校验规则
      regList: []
    },
    // 组件的插槽属性
    __slot__: {
      prepend: '',
      append: ''
    },
    // 其余的为可直接写在组件标签上的属性
    placeholder: '请输入',
    style: {width: '100%'},
    clearable: true,
    'prefix-icon': '',
    'suffix-icon': '',
    maxlength: null,
    'show-word-limit': false,
    readonly: false,
    disabled: false
  },


2、src\compontnes\目录下创建对应的组件

Mr_HJ / form-generator项目学习-增加自定义的超融组件(一),nbcio-boot,ruoyi-nbcio,vue,前端,vue,超融开源社区,superfusion
3、main.js中全局注册刚创建的组件

Mr_HJ / form-generator项目学习-增加自定义的超融组件(一),nbcio-boot,ruoyi-nbcio,vue,前端,vue,超融开源社区,superfusion
4、src\views\index\RightPanel.vue 中绑定第一步中json中添加的各个属性值

<el-form-item
            v-if="activeData.__config__.tag==='sf-input'" label="数据库表">
            <el-select v-model="activeData.__config__.tableName" placeholder="请选择数据库表"
              v-hasPermi="['tool:gen:list']" @change="tableChange" filterable>
              <el-option v-for="item in tableList" :key="item.tableName" :value="item.tableName"
                :label="item.tableName?item.tableComment+'('+item.tableName+')':item.tableComment">
                <span >
                  {{ item.tableName?item.tableComment+'('+item.tableName+')':item.tableComment}}
                </span>
                <span>{{item.sub==false?'主表':'从表'}}</span>
              </el-option>
            </el-select>
          </el-form-item>
<el-form-item v-if="activeData.__vModel__!==undefined && activeData.__config__.tableName"  label="字段名">
            <el-select v-model="activeData.__vModel__" placeholder="请选择字段" clearable
              filterable @change="fieldChange">

              <el-option-group label="">
                <el-option v-for="item in columnList" :key="item.columnId"
                  :value="item.columnName"
                  :label="item.columnName?item.columnComment+'('+item.columnName+')':item.javaType">
                </el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
tableChange(table) {
      console.log("tableChange table",table)
      this.activeData.__config__.tableName = table
      const tableName = table
      this.getColumnList(tableName);
    },
    getColumnList(tableName) {
      if (tableName) {
        this.loading = true;
        getGenColumn(tableName).then(response => {
          this.columnList = response.rows;
          //this.total = response.total;
          this.loading = false;
        });
      }
    },

效果图如下:

Mr_HJ / form-generator项目学习-增加自定义的超融组件(一),nbcio-boot,ruoyi-nbcio,vue,前端,vue,超融开源社区,superfusion文章来源地址https://www.toymoban.com/news/detail-780944.html

到了这里,关于Mr_HJ / form-generator项目学习-增加自定义的超融组件(一)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • flutter 中实现动态表单 form generator

    最近有人问我 flutter 前端如何处理动态表单。 这种是企业开发中的常见问题,特别是问卷和工作流审核表单。 今天我们就来实现下这个功能,主要是处理这个业务功能的思路。 原文 https://ducafecat.com/blog/flutter-form-generate-dymic-data http://www.form-create.com/designer/ https://github.com/Gav

    2024年02月12日
    浏览(39)
  • Form Generator 扩展子表单组件之表单校验(超详细)

    form-generator的作者是这样介绍的:Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中;也可导出JSON表单,使用配套的解析器将JSON解析成真实的表单。 但目前它提供的组件并不能满足我们在项目中的使用。所以该专栏主要讲解如何在该项目中从零

    2024年02月16日
    浏览(71)
  • Form Generator 表单JSON数据储存以及JSON回显表单

    form-generator的作者是这样介绍的:Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中;也可导出JSON表单,使用配套的解析器将JSON解析成真实的表单。 但目前它提供的组件并不能满足我们在项目中的使用。所以该专栏主要讲解如何在该项目中从零

    2024年02月14日
    浏览(41)
  • 【element-ui】el-form-item使用v-if导致的问题 , 增加Key

    问题:v-if在操作dom时 在根节点上进行的删减 导致 rules 判断的时候 无法取到 v-if 添加进来的prop值 解决:在 el-form-item 中添加一个属性key,key的值是唯一的(一般key和prop写一样的内容即可,因为rules里面的东西不能重复定义,所以肯定是唯一的。) 参考: 给el-form-item,添加

    2024年01月22日
    浏览(48)
  • Hololens入门开发(二)unity项目设置及MR开发包导入

    一.新建一个u3d项目 二.将unity的平台切换为Universal Windows Platform  三.MR开发包导入 开发包链接来自Github,根据需要的版本进行选择 https://github.com/microsoft/MixedRealityToolkit-Unity/releases 将五个unitypackage文件全部导入unity中  四.项目设置 1.选择发布设置,定位到capabilities板块 依次勾

    2024年02月05日
    浏览(80)
  • Hadoop学习笔记(HDP)-Part.14 安装YARN+MR

    目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger Part.14 安装YARN+MR Part.15 安装HIVE Part.16 安装HBase

    2024年02月05日
    浏览(35)
  • 【ChatGPT】Mr. Ranedeer:可定制个性化学习体验的 GPT-4 AI 导师提示

    Mr. Ranedeer AI Tutor 是一个可定制的提示,为具有不同需求和兴趣的用户提供个性化的学习体验。它使用GPT-4来释放AI的潜力,并允许您调整知识深度以匹配您的学习需求,自定义学习风格,沟通类型,语气和推理框架 。 当您使用Mr. Ranedeer AI Tutor时,您 可以选择自己的学习风格

    2024年02月11日
    浏览(51)
  • 【SpringBoot】项目启动增加自定义Banner

    最近有个老哥推荐我给博客启动的时候加上自定义Banner,开始我还不太明白他说的是那部分,后面给我发了这样一个,瞬间就懂了~ 也就是用于替换我们启动时候的这个页面 其实修改的方法也比较简单,只需要在resource目录下,放一个banner.txt文件即可,文件下面就存放我们需

    2024年02月20日
    浏览(33)
  • vue3 antd项目实战——Form表单的重置【使用resetFields()重置form表单数据、清空输入框】

    文章内容 文章链接 Form表单 提交和校验 https://blog.csdn.net/XSL_HR/article/details/128495087?spm=1001.2014.3001.5501 Form表单的 嵌套使用 https://blog.csdn.net/XSL_HR/article/details/128488913?spm=1001.2014.3001.5501 Form表单的 动态校验规则 https://blog.csdn.net/XSL_HR/article/details/128437275?spm=1001.2014.3001.5501 往期文章

    2024年02月02日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包