我给公司封装的组件帮公司提效了60%

前置内容

在公司开发中或多或少都会有几个管理系统的项目，而对于这些系统大多页面都是表单、表格组成，为了不花费太多精力在这些不那么需要定制化的页面上，一般都会选择去用组件库完成，这个时候就如果将这些简单、枯燥的事情用配置项完成，把精力放在更有挑战的事情上，那么工作摸鱼的时间又多了不少。下面就分享下我花了近一个月的时间为公司封装的组件。

涉及到的技术：

• 
  
• vue
  
• element-ui
  

就基于上面两个来实现的，使用起来也非常简单，并不需要你去记太多prop，就是element哪些。你只需要这么简单的配置，表单项就出来了

选择之后, testFormModel对象就会是这样

{

  treeProp: '三级 1-1-1',

}

为了方便使用, 我需要下拉提供这么几个功能:

• 
  
• 根据url动态请求数据(可携带参数,且参数变动之后重新发起请求)
  
• 需要获取动态请求回来的数据
  
• 需要提供数据格式化的能力(数据格式化显示是为了不变动数据的情况正确显示页面)
  
• 需要实现过滤功能
  

{

  label: '树形下拉',

  // formModel绑定的属性

  prop: 'treeProp',

  type: 'treeSelect',

  url: 'xxxx',

  params: {

    query: 'all',
},

  resolveData: (data) => {

    this.xxx = data
}

  nodeKey: 'dyId',

  props: {

    label: 'name',

    children: 'sublevel'
},

  multiple: true,

  checkStrictly: false,

  filterable: true,
}

效果图💗

简单的配置下这树形功能就非常的强大了，同样也支持用户自己去配置懒加载数据

{

  lazy: true,

  load: this.loadNode,
}

这个时候就不需要去配置动态请求的哪些的配置，由用户自己实例接口的懒加载数据请求

我们需要完成什么样的东西？

整体效果图💗

• 
  
• 配合侧边栏，校验失败右侧对应label标红
  
• 点击右侧label视图自动滚动到对应表单项，并激活表单项
  
• 侧边栏可配置(可以需要，也可以不配置)
  

这就是后面我们要实现的组件库，本文只是抛转引玉，对后面要做的事件大概说下，后续文章会很详细的分享整个组件封装的架构和思路，对于表单的一些「原子组件」的实现，之前也分享过一些，感兴趣的可以关注我的专栏：组件封装最佳实践

表单支持的组件

• 
  
• el-input/el-autocomplete
  
• el-select
  
• treeSelect 「集成」
  
• el-switch
  
• el-checkbox/el-radio/el-raiod-group/el-checkbox-group
  
• el-date-picker/el-time-picker
  
• el-cascader/el-cascader-panel
  
• table 「集成」
  

有些功能还在完善，暂时就没有共享代码。后续会发布到npm提供下载，通过Vue.use()使用插件的方式使用

如何使用？

main.js

// 引用插件
import './plugins'

plugins.js

import './element-ui'
import './dynamic-ui'

这套组件是依赖element-ui封装的，所以前提是需要使用element

dynamic-ui.js

import Vue from 'vue'
import dynamicUI from 'dynamic-ui'
import 'dynamic-ui/lib/index.scss'
// 向表单添加组件类型
import DynamicTable from '@/components/DynamicTable/src/index.vue'

import { getToken } from '@/utils/auth'
import request from '@/utils/request'


Vue.component(DynamicTable.name, DynamicTable)

Vue.use(dynamicUI, {

  request, // 动态请求数据的方法

  baseURI: process.env.VUE_APP_BASE_API, 

  parseData: () => {}, // 解析接口返回数据的方法

  requestHeaders: { // 请求头

    Authorization: getToken()

  },

  // 需要动态添加到表单组件的类型

  addFormComponent: [

    {

      type: 'table',

      name: DynamicTable.name

    }

  ]

})

组件库提供的功能

• 
  
• 传入[全局, 局部]的request
  
• 传入[全局, 局部]的parseData
  
• 传入requestHeaders请求头参数
  
• 动态添加组件作为表单项
  

支持动态请求的数据组件

• 
  
• select
  
• treeSelect
  
• checkbox/radio
  
• table
  
• cascader/cascader-panel
  

以上几个组件类型在element基础上进行了扩展，允许用户动态请求数据，统一prop这样

三者的使用场景

这里分别说下parseData/formatter/resoveData的使用场景

parsseData

一般我们在使用axios都会封装响应拦截器，做业务码的统一处理，但一般不会去变动data，现在有个问题是这样的，后端返回的数据是这样的

{
code: '200',
message: 'xxx',
data: {

    ...
pageData: [] // 这个才是我们要的数据

  }

}

只有个别数据是这样的格式，这个时候全局配置就不去动，可以允许去传递单个组件的parseData来解决这个问题

formatter

用于在不影响原有数据的情况下格式化数据以正确显示页面，比如这样

formatter: (value) => {
return `dy-${value}`

},

resolveData

获取响应式的数据：直接变动数据，可直接影响页面。

resolveData: (data) => {
console.log(data)

  data[0].name = '欢迎关注：前端自学驿站'

},

以上所有类型都会在请求参数变动之后重新请求数据，所以如果后端提供分页接口，前端也就能实现分页懒加载的功能

表格组件支持的类型

表格会支持

• 
  
• 展示模式
  
• 编辑模式(支持所有表单组件类型，包括用户动态添加的)
  

本来打算将组件的功能大致的过一遍，但是写到这太晚了，有点肝不动了~，目前就是表格编辑模式这块还有些地方需要完善，后续完善测试通过之后就会立马发布，欢迎大家持续关注~

写在最后

如果文章中有那块写的不太好或有问题欢迎大家指出，我也会在后面的文章不停修改。也希望自己进步的同时能跟你们一起成长。喜欢我文章的朋友们也可以关注一下，我会很感激第一批关注我的人。此时，年轻的我和你，轻装上阵；而后，富裕的你和我，满载而归。

业精于勤，荒于嬉