前言
新项目 Elemnet UI 组件业务封装，封装需求满足后期不修改业务代码，直接更新前端的封装组件的UI库代码即可实现无缝切换UI库的需求。目前新项目的功能产品还在梳理，项目第一期还未开始，前端技术小组先行进行的组件封装。
Table 组件封装目标
- 封装的用法要和 Element UI Table 组件的用法保持一致
- 目的是降低引用(使用)成本
- 支持纯数据绑定
- 支持自定义模板满足业务定制化需求
Table 组件封装内容
目录结构
components 封装组件目录
talbe
Index.vue
TableColumn.vue
Views
CenterPage.vue 组件调用层
table/Index.vue
这个文件默认封装了 el-table 组件外层，里面使用 v-bind="$attrs" 和 :xxx="config.xxx" 模式，在 el-table 内层使用 slot 来接受，这样可以满足表格的自定义模板需求，如果只是渲染基本数据，可以直接把 el-table-column 也封装好，如代码中的注释部分
table/TableColumn.vue
这个文件封装的 el-table-column , 这里面同样了用了 slot 主要用于支持表格列中的自定义部分，添加了一个自定义的参数 isNativeRenter ，表示当前列配置是否是原生数据绑定渲染
注意
这里面的
CenterPage.vue
基础表格调用，只渲染数据
template
script
table: {
config: {
columns: [
{
prop: 'date',
label: '日期'
},
{
prop: 'name',
label: '姓名'
},
{
prop: 'address',
label: '地址'
width: 300
}
]
},
data: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
},
自定义列模板表格
{{ nativeData[2] }}
{{ nativeData[0].date }}
查看
删除
数据层
table3: {
config: {
columns: [
{
width: '50',
type: 'index'
},
{
prop: 'date',
label: '日期',
width: '200',
key: 'date',
sortable: true,
isNativeRenter: true
},
{
prop: 'name',
label: '姓名',
key: 'name',
sortable: true
},
{
prop: 'address',
label: '地址',
width: '400',
key: 'address'
},
{
label: '操作',
width: '200',
fixed: 'right',
}
],
border: true,
stripe: true,
size: 'mini'
},
data: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
封装过程中遇到的问题和思考
整个封装过程使用到的技术点相关内容，主要为
slot 的合理使用、父子组件的互相传值、父子组件的事件触发组件封装的内容在我们目前项目的高业务复杂度（包含高度自定义设计出来的功能，以及UI层的特殊需求效果）的项目中，当前业务未开展的情况下，无产品原型，无UI设计规范及效果，纯技术层封装对于业务的支持目前不确定，部分组件在开发过程使用可能需要二次调整和修改。
目前前端封装小组已经封装了一多半的 ElementUI 组件，一些组件在封装中发现，部分封装出来的组件在后期更换UI库时不时很灵活，在不调整业务代码的情况下，支持不同的UI库组件切换封装层的代码需要支持两种情况，或基于新的UI库组件用法修改调用参数进行匹配处理，这部分的后期在更新UI库时组件的修改代价还是很高的。
GitHub 源码地址
https://github.com/gywgithub/element2-package
GitHub 仓库预览地址
https://gywgithub.github.io/element2-package