说明：最近几个月负责公司部门vue项目的前端架构任务，该组件的设计实现，主要考虑提高业务开发效率，实现表格的动态化配置，对项目中常见的业务页面，能以较少的代码量，通过简单的json配置实现表格和表单的渲染，实现代码的开发任务。要点有三：
1、表格的动态化配置，动态展现表格内容、配置化显示操作按钮，可扩展操作按钮并提供表格中自定义列模板，使用vue的render原理实现。使用到组件BaseCrud
2、新增、修改的操作弹窗，表单内容动态配置，与表格内操作实现联动。使用组件BaseDialogForm
3、表格列表的数据获取，增删改查的异步请求，都依赖封装的apiService方法，方法中抽象了list、create、update、delete、detail方法，具体代码和实现思路在另外一篇文章使用axios进行apiService的封装中讲解。
注意：crud中的表格自定义列模板依赖于cell组件，源码为下方的expand.js，需要在BaseCrud中引入使用。使用方法和iview框架的表格中自定义方法完全一致（直接使用的iview中的实现源码，哈哈~~~）。
一、BaseCrud的组件源码
新增
|
{{scope.row[item.prop]}}
修改
删除
查看
{{item.name}}
该组件主要提供了表格的字段动态配置，操作按钮的自定义配置，包括是否显示新增、修改、删除、查看按钮。操作区域使用属性配置，是因为一般右侧操作区域是固定的，而且如果使用宽度自适应的话，会出现宽度不够，操作按钮换行的难看效果，所以使用gridEditWidth可配置。操作区域可隐藏，部分页面中使用可能只是查询列表。show-overflow-tooltip可以在文字过长时，用省略号显示，我这里默认每个表格都使用该属性。可根据自己项目中的需求，修改代码为该属性可配置。需要注意的是，如果表格字段为空，鼠标hover时该格子有个小黑点的效果。可以考虑在代码中，判断字段为空时显示‘--’进行标识，也防止小黑点的出现。
提供了获取列表数据的方法，新增和修改的方法，依赖于BaseDialogForm组件的应用，新增和修改时会复用同一个模态框，但是通过formTitle展示不一样的标题，最后保存时通过特殊字段id进行业务逻辑的区分。扩展的操作按钮，使用handleEmit方法进行统一处理，使用事件映射完成父子组件的通信。在具体使用时，可在父组件中使用this.$refs.crud.getData()在进行业务操作后，刷新列表数据。
上诉组件源码只是提供了基本的实现思路，我在项目实际使用中，结合公司的定制化业务，实际还结合了很多组件的应用，包括查看详情模态框是根据新增和修改的动态表单进行默认生成展示，配置列表上方动态生成的高级搜索表单进行表格数据查询操作等等。具体的扩展大家可以根据实际业务进行定制化修改。
具体的使用实例会在最下方代码展示
二、表格自定义列模板，依赖的expand.js的源码
export default {
name: 'TableExpand',
functional: true,
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: null
}
},
render: (h, ctx) => {
const params = {
row: ctx.props.row,
index: ctx.props.index
};
if (ctx.props.column) params.column = ctx.props.column;
return ctx.props.render(h, params);
}
};
三、BaseDialogForm组件的源码
{{option.name}}
{{option.name}}
上诉代码大家应该都能看懂，就是通过简单的config数组提供需要动态生成的表单配置，具体包含表单控件类型、对应的字段、验证规则、placeholder文字等等所需的配置，可根据自身情况进行扩展，此处只做简单的示例
需要注意的是，在使用重置表单状态的方法中，需要预先判断组件实例是否存在，因为el-dialog的底层代码实现用了v-if，在第一次还未显示时，dom实际不存在，如果不进行判断直接使用的话，代码会报错。
四、使用示例之用户列表渲染
页面代码：
config配置：
export const USER_CONFIG = {
gridConfig: [
{label: '用户ID', prop: 'id', width: '100'},
{label: '手机号(登录账号)', prop: 'tel'},
{label: '邮箱', prop: 'email', width: '100'},
{label: '中文名', prop: 'name'},
{
label: '状态', prop: 'status', render: (h, params) => {
if(params.row.status === '0'){
return h('el-tag', {
props:{
size:'mini',
type:'warning'
}
},'正常');
}else {
return h('el-tag', {
props:{
size:'mini',
type:'success'
}
},'禁用');
}
}
},
{label: '创建时间', prop: 'create_time'},
{label: '扩展信息', prop: 'expand'}
],
// crud的模态框表单配置，可配置表单类型，验证规则，是否必填,col-span布局可通过span参数配置
formConfig: [
{span: 12, label: '手机号', prop: 'tel', type: 'text'},
{span: 12, label: '中文名', prop: 'name', type: 'text'},
{span: 12, label: '邮箱', prop: 'email', type: 'text'},
{
span: 12, label: '角色',
prop: 'roleIdList',
type: 'checkbox',
data: [{name: '角色一', id: '1'}, {name: '角色二', id: '2'}],
rules: { type: 'array', required: true, message: '请选择角色', trigger: 'change' }
},
{
span: 12, label: '状态',
prop: 'status',
type: 'radio',
data: [{name: '正常', id: 1}, {name: '禁用', id: 0}],
rules: {required: true, message: '请选择角色状态', trigger: 'change'}
},
{span: 24, label: '备注', prop: 'expand', type: 'textarea'}
],
// crud的操作按钮配置，基础按钮有添加、修改、删除、查看，还可以配置扩展按钮
gridBtnConfig: {
create: true, update: true, delete: true, view: false,
expands: [
{ name: '下载按钮', emitName: 'download', type: 'primary' }
]
},
// 表单基础数据类型，需要预先赋值
formModel: {
id: '',
tel: '',
name: '',
email: '',
status: '',
create_time: '',
expand: '',
roleIdList: []
}
};
以上是用户列表的基础配置使用示例，数据使用的是测试数据。在实际使用中应该是通过apiService从服务器端请求数据。下列截图展示了基础的配置使用效果展示。
五、总结
上诉示例是基础业务的实现代码，由于实际业务中代码量稍大，逻辑稍微复杂，并未在此处进行完全展示。此处代码为删减版，可能有一些问题，可以留言进行探讨解决。表格配置实际使用中，应该会有使用过滤器的情况，还有我在项目中实际使用时，有表格多选的情况，表格内操作按钮，和表格外按钮的配置，以及涉及批量操作的如批量删除等业务。若后期大家实际需要，我会陆续分享实现方案。
如果各位大牛有更好的实现方案，也希望不吝赐教，大家共同进步。
最后，希望走过路过的朋友能个给个赞呗，谢谢~~