跳到主要内容

封装自定义组件

本篇文章将带领你编写行编辑的自定义组件，实现更加高级的功能。

一、准备工作​

建议自定义组件都放到components/JVxeCustom目录下，方便管理。

如果需要分类，可以在该目录下新建个目录，例如本次示例新建一个demo文件夹

然后再新建一个.vue文件，该文件就是自定义组件的实际功能。

如上图所示，我新建了一个 JVxeDemoCell.vue 文件，接下来就需要在这个文件里写组件的实际功能代码了。

二、封装功能​

打开组件文件，引入公共方法 （重要） ，

import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/src/hooks/useJVxeComponent';

每个自定义组件都必须要引用，因为这里面封装了组件所必要的参数、变量和方法。

1、JVxeCellMixins详解​

1.1 混入参数（props）​

参数名类型解释
valueany绑定的值
rowobject当前行的数据
columnobject当前列的配置
paramsobject组件公共参数
renderOptionsobject渲染选项
renderTypestring渲染类型（ func、bool、string、number、object、integer）

1.2 混入变量（data）​

变量名类型解释
innerValueanyvalue经过setValue()增强（详见：“自定义组件增强”章节）处理后的值

1.3 混入计算属性（computed）​

属性名类型解释
caseIdstringJVXETable实例的唯一ID
typestring组件type，对应JVXETypes，对应注册时填写的type，用去区别多个不同的type但用相同的一个组件时判断
originColumnobject原始列配置（用户手写的配置列，可以在这里获取自定义参数）
cellPropsobject当前组件绑定的props

1.4 混入方法（methods）​

  • trigger(name, event = {}, args = []) 触发事件
  • handleBlurCommon(value) 公共处理blur事件
  • handleChangeCommon(value) 公共处理change事件

2、示例：简单封装​

简单封装就是只封装可编辑模式下的组件，在实际使用中，组件是不显示出来的，只有当点击单元格的时候才会显示出组件，好处就是可以极大的提升性能。 所以简单封装只需要一个vue组件就可完成。 完整示例：

注册并查看效果（注册方法见：三、最终注册）

三、最终注册​

推荐在src/components/JVxeCustom/index.ts文件内完成注册，可以做到开箱即用。 注册只需要调用registerAsyncComponent 异步方法即可完成注册。

示例：

  • 可在JVxeTypes.ts文件中添加常量供其他地方调用

四、使用示例​

五、参考示例​

简单示例：src/components/jeecg/JVxeTable/src/components/cells/JVxeCheckboxCell.vue;

复杂示例：src/components/jeecg/JVxeTable/src/components/cells/JVxeSelectCell.vue