/** * Created by hanxueqiang on 200107 * * 表单匹配项 */ <template> <div> <el-input v-if="isInput" v-model="currentVal" v-bind="bindProps" v-on="bindEvents" size="mini" ></el-input> <el-input-number v-if="isInputNumber" v-model="currentVal" v-bind="bindProps" v-on="bindEvents" :controls-position="itemOptions['controls-position'] || 'right'" size="mini" ></el-input-number> <el-select v-if="isSelect" v-model="currentVal" v-bind="bindProps" v-on="bindEvents" size="mini" clearable > <el-option v-for="item in itemOptions.options" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> <!-- datetimerange/daterange --> <el-date-picker v-if="isDatePickerDateRange" v-model="currentVal" v-bind="bindProps" v-on="bindEvents" :type="itemOptions.type || 'datetimerange'" size="mini" clearable :picker-options="pickerOptionsRange" start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" ></el-date-picker> <!-- monthrange --> <el-date-picker v-if="isDatePickerMonthRange" v-model="currentVal" v-bind="bindProps" v-on="bindEvents" type="monthrange" size="mini" clearable :picker-options="pickerOptionsRangeMonth" start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期" value-format="yyyy-MM" ></el-date-picker> <!-- others --> <el-date-picker v-if="isDatePickerOthers" v-model="currentVal" v-bind="bindProps" v-on="bindEvents" :type="itemOptions.type" size="mini" clearable placeholder="请选择日期" ></el-date-picker> <el-cascader v-if="isCascader" v-model="currentVal" v-bind="bindProps" v-on="bindEvents" size="mini" clearable ></el-cascader> </div> </template> <script> import tools from '@/utils/tools' export default { inheritAttrs: false, props: { value: {}, itemOptions: { type: Object, default () { return {} } } }, data () { return { pickerOptionsRange: tools.pickerOptionsRange, pickerOptionsRangeMonth: tools.pickerOptionsRangeMonth } }, computed: { // 双向绑定数据值 currentVal: { get () { return this.value }, set (val) { this.$emit('input', val) } }, // 绑定属性 bindProps () { let obj = { ...this.itemOptions } // 移除冗余属性 delete obj.label delete obj.prop delete obj.element delete obj.initValue delete obj.rules delete obj.events if (obj.element === 'el-select') { delete obj.options } return obj }, // 绑定方法 bindEvents () { return this.itemOptions.events || {} }, // el-input isInput () { return this.itemOptions.element === 'el-input' }, // el-input-number isInputNumber () { return this.itemOptions.element === 'el-input-number' }, // el-select isSelect () { return this.itemOptions.element === 'el-select' }, // el-date-picker (type: datetimerange/daterange) isDatePickerDateRange () { const isDatePicker = this.itemOptions.element === 'el-date-picker' const isDateRange = !this.itemOptions.type || this.itemOptions.type === 'datetimerange' || this.itemOptions.type === 'daterange' return isDatePicker && isDateRange }, // el-date-picker (type: monthrange) isDatePickerMonthRange () { const isDatePicker = this.itemOptions.element === 'el-date-picker' const isMonthRange = this.itemOptions.type === 'monthrange' return isDatePicker && isMonthRange }, // el-date-picker (type: other) isDatePickerOthers () { const isDatePicker = this.itemOptions.element === 'el-date-picker' return isDatePicker && !this.isDatePickerDateRange && !this.isDatePickerMonthRange }, // el-cascader isCascader () { return this.itemOptions.element === 'el-cascader' } }, created () {}, methods: {}, components: {} } </script> <style lang='less' scoped> </style>
（3）依赖引入的一些函数方法 tools.js