Usage NPM I zx-lib-s

Element-ui Form, table secondary encapsulation

The form now encapsulates the components shown in the figure. The components only encapsulate the components in ELemen for easy use.

The slot slot in the form can be used to place different components according to your needs, as follows:

Usage,

  • FormCols is in the form of [[],[],[]]. Each bracket represents a row

  • EType indicates the type. NoSohw indicates whether to display span indicates the proportion

  • Options: [{label: “phone “, value: “0”}, {label:” computer “, value: “1”}], options: ‘phone, computer ‘, options: [‘ phone ‘,’ computer ‘]

  • The change and click events in the form will be sent uniformly and can be processed separately according to the value of prop. When prop is Submit, rule will be verified. When prop is reset, data will be cleared and the initial value will be restored

  • You can use this.$refs to set the values of these fields

SetNoShow (prop, value) {this.setNewValue(prop, "noShow", value)} SetOptions (prop, value) {this.setNewValue(prop, "options", value)} /** * change a value in the 2d array * @param prop * @param value value to be changed */ setNewValue(prop, key, value) { let two = -1; let one = this.formCols.findIndex(item => { let iIndex = item.findIndex(iItem => { return iItem.prop === prop }) if (iIndex ! = = = 1) {two iIndex return true}}) if (one = = = 1 | | two = = = 1) {the console. The log () 'could not find the field to set up the' return} this.$set(this.formCols[one][two], key, value) }Copy the code
FormCols: [[{eType: 'Input', placeholder: "label: "Input", prop: 'name1', noShow: false, span: 6, suffixIcon: "el-icon-eleme"}, {eType: 'slot', label: "custom slot", slotName: "test", prop: 'date5', span: 6}, {eType: 'Radio', label: "Radio", the options: [{label: "mobile phone", value: "0"}, {label: "computer," value: "1"}], prop: 'date10', span: 6,}, {eType: 'RadioButton', label: "RadioButton", options: [{label: "phone ", value: "0"}, {label: "Computer ", value: "1"}], prop: 'date11', span: 6,},], [{eType: 'InputNumber', label: 'InputNumber', prop: 'date11', span: 6,},], [{eType: 'InputNumber', label: 'InputNumber', prop: 'date16', span: 6,}, {eType: 'CheckButton', label: "CheckButton", noShow: false, // options: [{label: "phone ", value: "0"}, {value: label: "computer", "1"}], / / options: 'mobile phone, computer, options: [' mobile phone', 'computer'], prop: 'date15, span: 6,}, {eType: 'Check' label, "CheckBox", / / options: [{value: label: "mobile phone", "0"}, {value: label: "computer", "1"}], the options: 'mobile phones, computers, prop: 'date13', span: 6, }, { eType: 'DatePicker', type: 'year', label: "year", valueFormat: "yyyy", prop: 'date18', span: 6,},], [{eType: 'Select', label: "Select" options: [{label: "mobile phone", value: "0"}, {label: "computer," value: "1"}], prop: 'date17', span: 6, }, { eType: 'DatePicker', type: 'date', label: "date", valueFormat: "yyyy-MM-dd", prop: 'date19', span: 6, }, { eType: 'DatePicker', type: 'datetime', label: "datetime", valueFormat: "yyyy-MM-dd hh:mm:ss", prop: 'date20', span: 6, }, ], [ { eType: 'DatePicker', type: 'daterange', label: "daterange", valueFormat: "yyyy-MM-dd", prop: 'date21', span: 6, }, { eType: 'DatePicker', type: 'datetimerange', label: "datetimerange", valueFormat: "yyyy-MM-dd hh:mm:ss", prop: 'date22', span: 6, }, { eType: 'DatePicker', type: 'dates', label: "dates", valueFormat: "yyyy-MM-dd", prop: 'date23', span: 6, }, { eType: 'TimePicker', label: "TimePicker", prop: 'date24', noShow: false, span: 6, }, ], [ { eType: 'Switch', label: "Switch", prop: 'date25', span: 6, }, { eType: 'Slider', label: "Slider", prop: 'date26', noShow: false, span: 6,},], [{eType: 'Button', value: "submit ", type: "success", prop: 'submit', span: 2,}, {eType: 'Button', value:" value" "Reset", the type: "success", prop: 'reset' span: 2,}]],Copy the code