网站建设 昆明,滨州公司网站建设推广,基于微信公众号开发网站开发,品牌网站建设只询大蝌蚪前言
什么是可编辑表格呢#xff1f;简单来说就是在一个表格里面进行表单操作#xff0c;执行增删改查。这在一些后台管理系统中是尤为常见的。 今天我们根据vue2 element-ui来设计一个表单表格组件。#xff08;不涉及完整代码#xff0c;想要使用完整功能可以看底部连…前言
什么是可编辑表格呢简单来说就是在一个表格里面进行表单操作执行增删改查。这在一些后台管理系统中是尤为常见的。 今天我们根据vue2 element-ui来设计一个表单表格组件。不涉及完整代码想要使用完整功能可以看底部连接
开始设计
1.表单组件
首先我们思考表格里面的表单元素应该如何实现。在用户使用的时候我们希望用户传入一个指定的类型自动去匹配对应的表单组件。那我们就应该将所有类型做一个集成并分别给他们一个类型名称。
当然为了最大程度为他们保留在element-ui已经实现的属性与方法formEle肯定接收的是一个对象对象里面包含了他要展示的组件类型一些原element-ui的属性方法我们使用$attrs便可以直接将属性绑定到element-ui的表单组件上。
我们为这个表单元素组件取名为formEle并最大程度为他们保留在element-ui已经实现的属性与方法。当然我们也可以修改一下一些常用属性的默认值例如打开clearable清除属性设置placeholder默认值。
下面是部分代码
templateel-inputv-ifformType inputv-modellocalValuev-bind$attrsv-on$listeners:clearableclearable:placeholderplaceholdertemplate v-for(value, name) in $slots #[name]slot :namename /slot/template/el-inputel-input-numberv-else-ifformType inputNumberv-modellocalValuev-bind$attrsv-on$listeners:placeholderplaceholdertemplate v-for(value, name) in $slots #[name]slot :namename /slot/template/el-input-numberel-selectv-else-ifformType selectv-modellocalValuev-bind$attrsv-on$listeners:clearableclearable:placeholderplaceholderel-optionv-foritem in optionsv-binditem:keyitem.value/el-option/el-selectel-date-pickerv-else-ifformType datePickerv-modellocalValuev-bind$attrsv-on$listeners:placeholderplaceholder:endPlaceholderendPlaceholder:startPlaceholderstartPlaceholder/el-date-pickerel-time-selectv-else-ifformType timeSelectv-modellocalValuev-bind$attrsv-on$listeners:placeholderplaceholder/el-time-selectel-time-pickerv-else-ifformType timePickerv-modellocalValuev-bind$attrsv-on$listeners:placeholderplaceholder:endPlaceholderendPlaceholder:startPlaceholderstartPlaceholder/el-time-pickerel-switchv-else-ifformType switchv-modellocalValuev-bind$attrs:placeholderplaceholder/el-switchel-cascaderv-else-ifformType cascaderv-modellocalValue:optionsoptionsrefcascaderv-bind$attrsv-on$listeners:placeholderplaceholder/el-cascader
/templatescript
export default {name: ClFormEle,props: {// 表单类型formType: {type: String,default: input},modelValue: null,options: {type: Array,default: () []}},model: {prop: modelValue,event: editModelValue},computed: {localValue: {get() {return this.modelValue},set(val) {this.$emit(editModelValue, val)}},clearable() {return this.$attrs.clearable false ? false : true},placeholder() {let text 请选择if (this.formType input) {text 请输入}return this.$attrs.placeholder || text (this.$attrs.label || )},rangeSeparator() {return this.$attrs.rangeSeparator || 至},startPlaceholder() {if (this.formType datePicker) {return this.$attrs.startPlaceholder || 开始日期} else {return this.$attrs.startPlaceholder || 开始时间}},endPlaceholder() {if (this.formType datePicker) {return this.$attrs.startPlaceholder || 结束日期} else {return this.$attrs.startPlaceholder || 结束时间}}},methods: {// 获取级联组件的回显值getCasLabelcader() {this.$nextTick(() {return this.$refs.cascader?.inputValue})}}
}
/scriptstyle langless scoped
.el-input {width: 100%;height: 30px;
}
.el-select {width: 100%;
}
.el-date-editor {width: 100%;
}
/style 需要注意的是我们还需要将element-ui组件的插槽位置预留出来。 2.考虑表格组件
首先我们要想到我们可能会使用表单组件的校验等功能那么在最外层就一定需要el-form来包裹表格组件。
其次是表单组件上model的绑定值的选择。可以预料的是我们最终绑定的数据一定是一个数组格式的。因为表格肯定不会只有一条数据。但是我们又无法在表单的model属性上绑定数组所以我们可以将数组封装为数组对象的格式。 !-- modelValueCom 为表格数据 --
el-form refformRef :model{ formData: modelValueCom }接下来我们将对列的数据进行处理。列的数据肯定也是一个数组结构的每列我们分为两个板块一个是用在el-table-column上的属性值一个则是内部表单内容的属性值。为了方便区分我们将采用一些数据格式
[{prop: name,label: 姓名,minWidth: 200px,formEle: {formType: input}}
]上面的formEle对象就行将来需要用在表单组件上的属性值而其他属性则是直接作用在el-table-column上的。
el-table-columnv-forcolumItem in columList:keycolumItem.propv-bindgetColumnAttr(columItem)getColumnAttr方法的作用就是剔除formEle属性 接着就是关于表单组件的使用了。既然我们需要表单的校验方法我们就需要el-form-item组件来包裹表单组件而组件上最重要的prop属性则可以直接在上面的列数据中获取注意因为数据是数组我们需要使用下标绑定到具体的哪条数据上label属性我们则可以直接省略因为我们已经有表头来展示了。
el-form-itemv-ifrow.isEdit:propformData. $index . columItem.prop:rulescolumItem.formEle?.rules说到表头我们可能需要想到为他添加必填校验的表示符我们在formEle里面加入showRequiredIcon属性判断是否需要展示必填校验。
el-table-columnv-forcolumItem in columList:keycolumItem.propv-bindgetColumnAttr(columItem)
template #default{ row, $index }el-form-itemv-ifrow.isEdit:propformData. $index . columItem.prop:rulescolumItem.formEle?.rulesClFormElev-modelrow[columItem.prop]v-bindcolumItem.formElev-oneventMap[columItem.prop]:labelcolumItem.label/ClFormEle/el-form-item!-- getLabel方法用于回显解析一些下拉级联时间等 --span v-else{{getLabel(getFormType(columItem),columItem,row[columItem.prop],$index)}}/span/templatetemplate #headerspan v-ifcolumItem.formEle?.showRequiredIcon classrequired_icon*/span{{ columItem.label }}/template
/el-table-column最后我们应该还需要有一列操作按钮对行数据进行修改保存删除等操作。修改保存就是修改表格数据的isEdit属性让在表单元素与span展示中切换。
el-table-column v-bindbtnColCpdtemplate #default{ row, $index: index, column }slot nameendColumn :data{ row, index, column }el-buttonv-if!row.isEdittypetexticonel-icon-editclick.native.stoprowEdit(index)修改/el-buttonel-buttonv-elsetypetexticonel-icon-checkclick.native.stopsaveRow(index)保存/el-buttonel-popconfirmv-ifisDelBtnTip:titledelBtnTipconfirmdelRow(index)el-buttontypetexticonel-icon-deleteclassdel_btn_textslotreference删除/el-button/el-popconfirmel-buttonv-elsetypetexticonel-icon-deleteclassdel_btn_textslotreferenceclick.native.stopdelRow(index)删除/el-button/slot/template
/el-table-columnbtnColCpd是一个关于最后一列属性配置对象我们可以的使用element-ui里面el-table-column组件的属性来控制最后一列。 到这一个简单的表单组件结构就基本实现了。
当然上面的设计还有很多的缺陷比如表单组件的方法该如何绑定各个表单组件插槽该如何抛出表单的校验可不可以在离开行的时候触发如果想要使用的组件formEle不包含怎么办等等想要实现一个完整的表单表格组件这些都是必须要考虑的。我封装了一个较为完整的表单表格组件大家可以在TableForm查看。
