手机购物网站 建站,徐州手机网站建设公司哪家好,高安网站找工作做面点事,服务器网站源码在哪前面我写过一个自定义电子签名的formcreate表单设计器组件#xff0c;那时初识formcreate各种使用也颇为生疏#xff0c;不过总算套出了一个组件不是。此次时隔半年又有机会接触formcreate#xff0c;重新熟悉和领悟了一番各个方法和使用指南。趁热打铁将此次心得再次分享。…前面我写过一个自定义电子签名的formcreate表单设计器组件那时初识formcreate各种使用也颇为生疏不过总算套出了一个组件不是。此次时隔半年又有机会接触formcreate重新熟悉和领悟了一番各个方法和使用指南。趁热打铁将此次心得再次分享。
本次要实现的自定义组件是一个表格表格在前端是个十分常见的组件然而formcreate里面却没有内置我翻了issues里面有大佬说可以直接用VxeTable来做做不做内置都是一样的。于是沿着这个思路自己做了一番实践最终也实现了两个版本一个是Element Table简易版一个是VxeTable的高度定制。下面就具体说说实现方法以及其中遇到的一些问题和解法。
Element Table实现自定义FormCreate表单设计器组件 自定义表头和列名
只要前端可以手动输入列名的label和value我们就可以根据这串json遍历实现一个表格。实现代码的代码如下
el-table:datatableOptions.tableData:bordertableOptions.showBorder:show-summarytableOptions.showSummary:summary-methodgetSummariessizeministylewidth: fit-content!--多选列--el-table-columnv-iftableOptions.showMultiSelecttypeselectionwidth50aligncenter/!--序号列--el-table-columnv-iftableOptions.showIndextypeindexlabel序号width50aligncenter/!--数据列--el-table-columnv-forcolumn in tableOptions.tableColumns:keycolumn.value:labelcolumn.label:propcolumn.valuewidth120aligncentertemplate slot-scopescopespan v-iftableOptions.readonly{{ scope.row[column.value] }}/spanel-inputv-elsev-modelscope.row[column.value]:valuescope.row[column.value]//template/el-table-column/el-tableel-buttonv-if!tableOptions.readonlytypetexticonel-icon-plusclickaddRow添加一行/el-button自定义组件生成规则
组件生产规则在上一篇文章中已经说过了不熟悉的同学可以去回顾下。Vue——formcreate表单设计器自定义组件实现
这里简略说一下本次开发中新得到的一些体验和实验方法吧。
1、生成规则中如何使用自定义组件
在上一篇文章中我们将组件引入到组件生产规则js文件中同时关联了自定义组件代码如下
import SignBoard from ../components/esign/SignBoard.vue;export const signboard {rule() {return {component: SignBoard, //挂载自定义组件};},
}这种方法相对繁琐一点本次在git上面查询问题时偶然看到一句话说只要是全局引入到自定义组件都可以直接在表单设计器中直接使用就像你使用iViewElementUI一样方便经测试确实可行一起来看代码
全局引入到自定义组件直接在生成规则中使用
1、main.js 全局引入表格组件
import FormTable from /views/process/components/table/FormTable.vue;
Vue.component(FormTable, FormTable)2、tableRule.js 组件生产规则文件中使用
export const formTable {rule() {return {//生成组件的名称type: FormTable,//field formcreate生成的json文件中用了收集组件填充数据的字段名称field: tableValue,};},
}2、表单设计器中如何实现自定义组件的自定义属性
自定义属性也定义在组件生成规则js文件中写在prop()中。
export const formTable {//拖拽组件配置项(props)的生成规则props() {return [//生成checkbox组件的options配置规则FcDesigner.makeOptionsRule(options),{ type: switch, field: showSummary, title: 是否显示表尾合计 },];}
};有一些公共默认属性通常是标签宽度标签位置表单尺寸等。如果我们需要一些自定义属性需要自己在组件规则文件的props() 中添加一个对象type可以是输入框开关计数器单选下拉框等基本控件可以是TableOptionsStruct高级输入等。 基础控件使用参考http://www.form-create.com/v2/element-ui/ 高级控件使用参考https://gitee.com/xaboy/form-create-designer/tree/master/src/components 当你不知道你所使用的控件怎么在组件规则里面使用时可以找官方提供的组件源码来看下参观里面的配置即可。 官方组件生成规则参考https://gitee.com/xaboy/form-create-designer/tree/master/src/config/rule
3、Table组件自定义属性 如上图Table中增加了设置表头列名是否显示表格边框表尾合计且支持自定义合计列显示序列号显示多选列初始表格行数等属性其中开关按钮计数器组件等都比较简单可以设置默认值控制属性等直接参考官方代码就好。我会详细说明下StructButtonTableOption多选下拉框等实现过程。
Struct
Struct是一个点击按钮弹出一个dialog可以自由编写输入一串json的一个组件。效果如下 这样我们自定义属性处理的内容就可以非常灵活了比如我们希望根据一串json配置自动生成一个自定义表格这个下一节展开说。或者说我们可以定义表格初始化显示的数据等等
{type: Struct,field: headers,title: 设置上传的请求头部,props: {defaultValue: {}}
}Button
上面的Struct组件是点击一个按钮弹出一个dialog有的同学可能说我不想点击按钮弹出dialog我想做其他自定义操作可以吗当然可以啦只不过官方并没有给出button的使用说明经过研究和实践我们需要使用原生el-button同时为button绑定click事件就能进行自定义操作了。 官方源码参考https://gitee.com/xaboy/form-create-designer/blob/master/src/config/base/field.js
这里我们来实现一个点击按钮给表格新增一行的小功能。实现思路为
点击按钮更新表格行数这里我们需要先获取表格原本的行数然后给其1自定义组件中监听表格行数属性的变化然后重新绘制表格行数
根据这个思路一起来看下这个代码如何实现 1、给按钮设置点击事件并更新表格行数 { type: hidden, field: rowNums, value: 1 },{type: el-button,props: {type: primary,size: mini,icon: el-icon-delete},inject: true,on: {click({ $f }) {//更新组件规则否则数据修改不会更新UIlet rowNums $f.getRule(rowNums).value$f.updateRule(rowNums, {value: rowNums1,});const rule $f.rule;if (rule) {rule.addRow true;$f.updateRule(rule);}}},native: true,children: [新增一行]},这里有一些知识点需要说明下 1、如何获取表格的行数 这里我们通过一个隐藏字段来收集表格的行数 2、如何更新表格的行数 首先我们需要获取表格行数的属性并将其更新。注意此处只修改属性值是没用的我们需要将这个规则进行刷新否则不会更新Ui。 组件规则的操作可参考更新指定规则 3、$f是什么 这里参考下官方文档的解释获取$f,他应该代表的就是FCDesigner对象有兴趣的同学可以打印看下他的结构。
2、根据表格行数更新Ui 修改完表格行数后我们需要在UI组件中监听这个数值的变化并根据这个数值更新UI。
props: {formCreateInject: {type: Object,required: true}
},watch: {//formCreateInject为组件生成时会给自定义组件注入的参数formCreateInject.rule.props: {handler() {//当表单设计器的自定义设置规则修改时同步更新FormCreateDesiger中的自定义组件this.update();},deep: true},},update(){let rowNums this.formCreateInject.rule.props?.rowNums ?? 1;for (let i 0; i rowNums - this.tableOptions.tableData.length; i) {this.tableOptions.tableData.push({});}
}实现过程比较简单其中有一点解释下我们注意下这个formCreateInject这个对象为表单设计器生成自定义组件时自动注入的参数这个属性需在UI组件的自定义属性中定义否则没法实现组件数据的回传等等 官方说明预定义 props
TableOption
TableOption根据名字就可以知道它是一个表格相关组件如下图
点击添加按钮可以新增一行在Table组件中就是用这个组件来实现自定义列名和表头的。 官网源码参考https://gitee.com/xaboy/form-create-designer/blob/master/src/utils/index.js
{type: TableOptions,field: columns,title: 设置表头和列名,props: {defaultValue: []},
},输入完成后我们将得到如下json
[{ label: seq, value: ‘’},
], //数据列然后根据这个数据实现Ui组件中的列的绘制。
组件之间的联动
这一节将介绍如何实现自定义行尾合计列的实现方式。
首先需添加一个下拉框来实现自定义列的选择 其次需要将已选的列回传给Table组件这里就用到了组件属性之间的联动可参考官方文档组件联动概括来说就是我们可以在某个组件规则的前后甚至子级增加对另外一个组件规则的控制在本例中我们需要用TableOption控制表尾合计列多选拉下框的显示所以合起来的代码应该为
{type: TableOptions,field: columns,title: 设置表头和列名,props: {defaultValue: []},//组件联动:设置完列名以后更新显示合计列的多选下拉列表control: [{handle(val, fApi) {sumColums val;sumColumsVal [];if (sumColums?.length 0) {sumColums.forEach(item {sumColumsVal.push(item.value);});}//更新组件规则否则数据修改不会更新UIfApi.updateRule(sumColumns, {value: sumColumsVal,options: sumColums});return val?.length 0;},append: showSummary, //在某个组件后插入rule: [{type: select,field: sumColumns,title: 自定义表尾合计列,value: sumColumsVal,//选择的数据类型为【】options: sumColums,//选项数据props: {multiple: true}}]}]
},
{ type: switch, field: showSummary, title: 是否显示表尾合计 },Ui组件中只计算某些列的合计实现如下
//自定义合计方法可以选择只计算某些列的合计不需要计算的返回空
getSummaries(param) {//需要计算合计的列let sumColumns this.formCreateInject.rule.props?.sumColumns;const { columns, data } param;const sums [];columns.forEach((column, index) {if (index 0) {sums[index] 合计;return;}let values [];if (sumColumns?.length 0) {//只计算选中列的合计values data.map(item {return sumColumns.indexOf(column.property) ! -1? Number(item[column.property]): -;});} else {//默认计算所有列的合计values data.map(item Number(item[column.property]));}if (!values.every(value isNaN(value))) {sums[index] values.reduce((prev, curr) {const value Number(curr);if (!isNaN(value)) {return prev curr;} else {return prev;}}, 0);} else {sums[index] ;}});return sums;
}VxeTable实现自定义FormCreate表单设计器组件
前面一节自己实现表格只能是比较简单的样式和效果如果我想要更复杂的表格呢如果只是增加更多的自定义属性来控制表格的实现那么必定增加运营配置人员的负担。此时VxeTable就为我们提供一个强大的功能只要写好高级配置的json代码中就可以根据这个json直接生成效果更为丰富的表格。
VxeTable官方文档参考https://vxetable.cn/#/table/start/install 本节我们用到的是VxeTable高级表格的能力大概预览下高级表格的实现代码
templatedivvxe-grid v-bindgridOptions//div
/templatescript langts setup
import { reactive } from vue
import { VxeGridProps } from vxe-tableinterface RowVO {id: numbername: stringnickname: stringrole: stringsex: stringage: numberaddress: string
}const gridOptions reactiveVxeGridPropsRowVO({border: true,height: 300,align: null,columnConfig: {resizable: true},columns: [{ type: seq, width: 50 },{ field: name, title: name },{ field: sex, title: sex },{ field: address, title: Address }],toolbarConfig: {slots: {buttons: toolbar_buttons}},data: [{ id: 10001, name: Test1, nickname: T1, role: Develop, sex: Man, age: 28, address: Shenzhen },{ id: 10002, name: Test2, nickname: T2, role: Test, sex: Women, age: 22, address: Guangzhou },{ id: 10003, name: Test3, nickname: T3, role: PM, sex: Man, age: 32, address: Shanghai }]
})
/script由上述代码可见Vxetable的代码非常简洁只需要一个option配置项就可以来那么沿着这个思路我们就可以把option放在自定义属性中用Struct来进行编辑就能快速实现不同效果的表格这个方法对配置人员对要求较高TT
实现过程不难代码就不放了。有兴趣的同学可以自行实践。
本篇文章介绍的内容较多相信经过这篇介绍以后再有自定义组件的需求时你一定都能游刃有余了。也有些盲点可能没扫到后续有研究会继续更新的。有好的思路也欢迎评论区留言探讨
