JeecgBoot 自定义组件说明文档（一）

dyyanewade
2,989 阅读2分钟

JDate 日期组件 使用文档

说明: antd-vue日期组件需要用moment中转一下，用起来不是很方便，特二次封装，使用时只需要传字符串即可

参数配置

参数类型必填说明
placeholderstringplaceholder
readOnlybooleantrue/false 默认false
valuestring绑定v-model或是v-decorator后不需要设置
showTimeboolean是否展示时间true/false 默认false
dateFormatstring日期格式 默认'YYYY-MM-DD' 若showTime设置为true则需要将其设置成对应的时间格式(如:YYYY-MM-DD HH:mm:ss)
triggerChangestring触发组件值改变的事件是否是change,当使用v-decorator时且没有设置decorator的option.trigger为input需要设置该值为true

使用示例

1.组件带有v-model的使用方法

<j-date v-model="dateStr"></j-date>

2.组件带有v-decorator的使用方法
a).设置trigger-change属性为true

<j-date :trigger-change="true" v-decorator="['dateStr',{}]"></j-date>

b).设置decorator的option.trigger为input

<j-date v-decorator="['dateStr',{trigger:'input'}]"></j-date>

3.其他使用 添加style

<j-date v-model="dateStr" style="width:100%"></j-date>

添加placeholder

<j-date v-model="dateStr" placeholder="请输入dateStr"></j-date>

添加readOnly

<j-date v-model="dateStr" :read-only="true"></j-date>

备注: script内需引入jdate

<script>
  import JDate from '@/components/jeecg/JDate'
  export default {
    name: "demo",
    components: {
      JDate
    }
    //...
  }
</script>

JSuperQuery 高级查询 使用文档

参数配置

参数类型必填说明
fieldListarray✔需要查询的列集合示例如下，type类型有:date/datetime/string/int/number
callbackarray回调函数名称(非必须)默认handleSuperQuery

fieldList结构示例：

  const superQueryFieldList=[{
    type:"date",
    value:"birthday",
    text:"生日"
  },{
    type:"string",
    value:"name",
    text:"用户名"
  },{
    type:"int",
    value:"age",
    text:"年龄"
  }]

页面代码概述:

1.import之后再components之内声明

import JSuperQuery from '@/components/jeecg/JSuperQuery.vue';
  export default {
    name: "JeecgDemoList",
    components: {
      JSuperQuery
    },

2.页面引用

  <!-- 高级查询区域 -->
  <j-super-query :fieldList="fieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>

3.list页面data中需要定义三个属性：

  fieldList:superQueryFieldList,
  superQueryFlag:false,
  superQueryParams:""

4.list页面声明回调事件handleSuperQuery(与组件的callback对应即可)

//高级查询方法
handleSuperQuery(arg) {
  if(!arg){
    this.superQueryParams=''
    this.superQueryFlag = false
  }else{
    this.superQueryFlag = true
    this.superQueryParams=JSON.stringify(arg)
  }
  this.loadData()
},

5.改造list页面方法

  // 获取查询条件
  getQueryParams() {
    let sqp = {}
    if(this.superQueryParams){
      sqp['superQueryParams']=encodeURI(this.superQueryParams)
    }
    var param = Object.assign(sqp, this.queryParam, this.isorter);
    param.field = this.getQueryField();
    param.pageNo = this.ipagination.current;
    param.pageSize = this.ipagination.pageSize;
    return filterObj(param);
  },

6.打开弹框调用show方法：

this.$refs.superQueryModal.show();

JEllipsis 字符串超长截取省略号显示

说明: 遇到超长文本展示，通过此标签可以截取省略号显示，鼠标放置会提示全文本

参数配置

参数类型必填说明
valuestring必填字符串文本
lengthnumber非必填默认25

使用示例

1.组件带有v-model的使用方法

<j-ellipsis :value="text"/>

Modal弹框实现最大化功能

1.定义modal的宽度：

  <a-modal :width="modalWidth"/>

2.自定义modal的title,居右显示切换图标

  <template slot="title">
    <div style="width: 100%;">
      <span>{{ title }}</span>
      <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
        <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
      </span>
    </div>
  </template>

3.定义toggleScreen事件,用于切换modal宽度

  toggleScreen(){
      if(this.modaltoggleFlag){
        this.modalWidth = window.innerWidth;
      }else{
        this.modalWidth = 800;
      }
      this.modaltoggleFlag = !this.modaltoggleFlag;
    },

4.data中声明上述用到的属性

    data () {
      return {
        modalWidth:800,
        modaltoggleFlag:true,

下拉选项滚动错位的解决方法

问题描述

当使用了 a-modal 或其他带有滚动条的组件时，使用a-select组件并打开下拉框时滚动滚动条，就会导致错位的问题产生。

解决方法

大多数情况下，在 a-select 上添加一个 getPopupContainer 属性，值为node => node.parentNode即可解决。 但是如果遇到 a-select 标签层级过深的情况，可能仍然会显示异常，只需要多加几个.parentNode （例：node => node.parentNode.parentNode.parentNode）多尝试几次直到解决问题即可。

代码示例

<a-select
    placeholder="请选择展示模板"
    :options="dicts.displayTemplate"
    :getPopupContainer="node => node.parentNode"
/>

JAsyncTreeList 异步数列表组件使用说明

引入组件

import JTreeTable from '@/components/jeecg/JTreeTable'
export default {
  components: { JTreeTable }
}

所需参数

参数类型必填说明
rowKeyString非必填表格行 key 的取值，默认为"id"
columnsArray必填表格列的配置描述，具体见Antd官方文档
urlString必填数据查询url
childrenUrlString非必填查询子级时的url，若不填则使用url参数查询子级
queryKeyString非必填根据某个字段查询，如果传递 id 就根据 id 查询，默认为parentId
queryParamsObject非必填查询参数，当查询参数改变的时候会自动重新查询，默认为{}
topValueString非必填查询顶级时的值，如果顶级为0，则传0，默认为null
tablePropsObject非必填自定义给内部table绑定的props

代码示例

<template>
  <a-card :bordered="false">
    <j-tree-table :url="url" :columns="columns" :tableProps="tableProps"/>
  </a-card>
</template>

<script>
  import JTreeTable from '@/components/jeecg/JTreeTable'

  export default {
    name: 'AsyncTreeTable',
    components: { JTreeTable },
    data() {
      return {
        url: '/mock/api/asynTreeList',
        columns: [
          { title: '菜单名称', dataIndex: 'name' },
          { title: '组件', dataIndex: 'component' },
          { title: '排序', dataIndex: 'orderNum' }
        ],
        selectedRowKeys: []
      }
    },
     computed: {
       tableProps() {
         let _this = this
         return {
           // 列表项是否可选择
           // 配置项见：https://vue.ant.design/components/table-cn/#rowSelection
           rowSelection: {
             selectedRowKeys: _this.selectedRowKeys,
             onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys
           }
         }
       }
     }
  }
</script>

JCheckbox 使用文档

说明: antd-vue checkbox组件处理的是数组，用起来不是很方便，特二次封装，使用时只需处理字符串即可

参数配置

参数类型必填说明
optionsarray✔checkbox需要配置的项，是个数组，数组中每个对象包含两个属性:label(用于显示)和value(用于存储)

使用示例

<template>
  <a-form :form="form">
    <a-form-item label="v-model式用法">
      <j-checkbox v-model="sport" :options="sportOptions"></j-checkbox><span>{{ sport }}</span>
    </a-form-item>

    <a-form-item label="v-decorator式用法">
      <j-checkbox v-decorator="['sport']" :options="sportOptions"></j-checkbox><span>{{ getFormFieldValue('sport') }}</span>
    </a-form-item>
  </a-form>
</template>

<script>
  import JCheckbox from '@/components/jeecg/JCheckbox'
  export default {
    components: {JCheckbox},
    data() {
      return {
        form: this.$form.createForm(this),
        sport:'',
        sportOptions:[
          {
            label:"足球",
            value:"1"
          },{
            label:"篮球",
            value:"2"
          },{
            label:"乒乓球",
            value:"3"
          }]
      }
    },
    methods: {
     getFormFieldValue(field){
       return this.form.getFieldValue(field)
     }
    }
  }
</script>

JCodeEditor 使用文档

说明: 一个简易版的代码编辑器，支持语法高亮

参数配置

参数类型必填说明
languagestring表示当前编写代码的类型 javascript/html/css/sql
placeholderstringplaceholder
lineNumbersBoolean是否显示行号
fullScreenBoolean是否显示全屏按钮
zIndexstring全屏以后的z-index

使用示例

<template>
  <div>
    <j-code-editor
      language="javascript"
      v-model="editorValue"
      :fullScreen="true"
      style="min-height: 100px"/>
    {{ editorValue }}
  </div>
</template>

<script>
  import JCodeEditor from '@/components/jeecg/JCodeEditor'
  export default {
    components: {JCodeEditor},
    data() {
      return {
        form: this.$form.createForm(this),
        editorValue:'',
      }
    }
  }
</script>

JFormContainer 使用文档

说明: 暂用于表单禁用

使用示例

<!-- 在form下直接写这个组件，设置disabled为true就能将此form中的控件禁用 -->
  <a-form layout="inline" :form="form" >
    <j-form-container disabled>
      <!-- 表单内容省略..... -->
    </j-form-container>
  </a-form>

JImportModal 使用文档

说明: 用于列表页面导入excel功能

使用示例

<template>
  <!--  此处省略部分代码...... -->
  <a-button @click="handleImportXls" type="primary" icon="upload">导入</a-button>
  <!--  此处省略部分代码...... -->
  <j-import-modal ref="importModal" :url="getImportUrl()" @ok="importOk"></j-import-modal>
  <!--  此处省略部分代码...... -->
</template>

<script>
  import JCodeEditor from '@/components/jeecg/JCodeEditor'
  export default {
    components: {JCodeEditor},
    data() {
      return {
        //省略代码......
      }
    },
    methods:{
      //省略部分代码......
      handleImportXls(){
        this.$refs.importModal.show()
      },
      getImportUrl(){
         return '你自己处理上传业务的后台地址'
      },
      importOk(){
        this.loadData(1)
      }
    }
  }
</script>

JSelectMultiple 多选下拉组件

online用 实际开发请使用components/dict/JMultiSelectTag

JSlider 滑块验证码

使用示例

<template>
  <div style="width: 300px">
    <j-slider @onSuccess="sliderSuccess"></j-slider>
  </div>
</template>

<script>
  import JSlider from '@/components/jeecg/JSlider'
  export default {
    components: {JSlider},
    data() {
      return {
        form: this.$form.createForm(this),
        editorValue:'',
      }
    },
    methods:{
      sliderSuccess(){
        console.log("验证完成")
      }
    }
  }
</script>

JTreeSelect 树形下拉组件

说明：异步加载的树形下拉组件

参数配置

参数类型必填说明
placeholderstringplaceholder
dictstring✔表名,显示字段名,存储字段名拼接的字符串
pidFieldstring✔父ID的字段名
pidValuestring根节点父ID的值 默认'0' 不可以设置为空,如果想使用此组件，而数据库根节点父ID为空，请修改之
multipleboolean是否支持多选

使用示例

<template>
  <a-form>
    <a-form-item label="树形下拉测试" style="width: 300px">
      <j-tree-select
        v-model="departId"
        placeholder="请选择部门"
        dict="sys_depart,depart_name,id"
        pidField="parent_id">
      </j-tree-select>
      {{ departId }}
    </a-form-item>
  </a-form >
</template>

<script>
  import JTreeSelect from '@/components/jeecg/JTreeSelect'
  export default {
    components: {JTreeSelect},
    data() {
      return {
        departId:""
      }
    }
  }
</script>

JPopup 弹窗选择组件

参数配置

参数类型必填说明
placeholderstringplaceholder
codestringonline报表编码
orgFieldsstringonline报表中显示的列,多个以逗号隔开
destFieldsstring回调对象的属性,多个以逗号隔开,其顺序和orgFields一一对应
fieldstringv-model模式专用,表示从destFields中选择一个属性的值返回给当前组件
triggerChangeBooleanv-decorator模式下需设置成true
callback(事件)function回调事件,v-decorator模式下用到,用于设置form控件的值

使用示例

<template>
  <a-form :form="form">
    <a-form-item label="v-model模式指定一个值返回至当前组件" style="width: 300px">
      <j-popup
        v-model="selectValue"
        code="user_msg"
        org-fields="username,realname"
        dest-fields="popup,other"
        field="popup"/>
      {{ selectValue }}
    </a-form-item>

    <a-form-item label="v-decorator模式支持回调多个值至当前表单" style="width: 300px">
      <j-popup
        v-decorator="['one']"
        :trigger-change="true"
        code="user_msg"
        org-fields="username,realname"
        dest-fields="one,two"
        @callback="popupCallback"/>
      {{ getFormFieldValue('one') }}
    </a-form-item>

    <a-form-item label="v-decorator模式被回调的值" style="width: 300px">
      <a-input v-decorator="['two']"></a-input>
    </a-form-item>


  </a-form >
</template>

<script>
  export default {
    data() {
      return {
        form: this.$form.createForm(this),
        selectValue:"",
      }
    },
    methods:{
      getFormFieldValue(field){
        return this.form.getFieldValue(field)
      },
      popupCallback(row){
        this.form.setFieldsValue(row)
      }
    }
  }
</script>
avatar
文章
阅读
粉丝
相关推荐
【VUE】element plus 日期组件动态限制日期选择范围（如同一季度）（picker-options的替代方案）
1.2k阅读
 · 
5点赞
el-table合并表格相同的行
2.3k阅读
 · 
17点赞
vue 管理后台table封装
2.8k阅读
 · 
43点赞
vue3页面跳转方法
2.6k阅读
 · 
0点赞
给element-ui中el-table选中行增加背景颜色
1.9k阅读
 · 
2点赞
Vue3.x + Vite2.x 入门实战 03：二次封装el-input组件
3.9k阅读
 · 
0点赞
Vue3实现Pagination分页组件（四）限制最大页码数
1.5k阅读
 · 
15点赞
el-table 行合并（指定列）
387阅读
 · 
2点赞
Vue3封装 page 分页组件
2.1k阅读
 · 
5点赞

友情链接：