background

When you’re searching for something on a projectDatePickerthetype="daterange"Version: 2.9.2

The code is as follows:

<el-date-picker V-model =" formdata.putTime "type="daterange" align="right" unlink-panels range-separator=" to" Placeholder =" placeholder "; placeholder=" placeholder "; placeholder=" placeholder "; '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" > </el-date-picker>Copy the code

PutTime is an array, and the parameters required in the background are putBeginTime and putEndTime, so it is required before the request is made

     params.putTime = params.putTime || [];
      params.putBeginTime = params.putTime[0];
      params.putEndTime = params.putTime[1];
      delete params.putTime;
Copy the code

In particular, the component’s cleanup operation, putTime, is set to NULL, which is uncomfortable to use

Secondary packaging

<template> <el-date-picker @change="onChange" v-model="list" v-bind="merageAttr" v-on="$listeners" > </el-date-picker> </template> <script> export default { inject: ["elForm"], props: { startKey: String, endKey: String }, data() { return { list: [] }; }, computed: { merageAttr() { return { ... {type: "daterange", align: "right", "unlink-panels": true, "range-separator": "to ", "start-placeholder": "Start date", "end - the placeholder" : "end date", "default - time" : [" 00:00:00 ", "23:59:59"], "value - format" : "yyyy-MM-dd HH:mm:ss" }, ... this.$attrs }; } }, methods: { onChange(list) { list = list || []; this.elForm.model[this.startKey] = list[0]; this.elForm.model[this.endKey] = list[1]; }}}; </script> </script>Copy the code

The From component provides its elForm instance in the form of provide, and its child component can be retrieved by Inject

V-on =”$listeners” and merageAttr ensure that components have default values and are responsive to external changes

You want to overwrite the “start-placeholder”: “start date “, you want to use the outside placeholder as well, not the startPlaceholder

Finally, solve the parameter problem through onChange

2021-07-17

$refs.form.resetfields () does not work

form.vue

resetFields() { if (! this.model) { console.warn('[Element Warn][Form]model is required for resetFields to work.'); return; } this.fields.forEach(field => { field.resetField(); }); },Copy the code

Field. ResetField is in form-item.vue, so there are three steps

The first step for el-form-item is to add prop

<el-form-item label=" application time: "prop="createTime"></el-form-item>Copy the code

The second step injects elFormItem

inject: ["elForm", "elFormItem"],
Copy the code

Third, override the resetField method of elFormItem

  mounted() {
    this.elFormItem.resetField = () => {
      this.list = [];
      this.elForm.model[this.startKey] = null;
      this.elForm.model[this.endKey] = null;
    };
  }
Copy the code