background

I’ve been working on c-side front-end development, used few frameworks in the beginning (Vant, Mint, etc.), and haven’t worked on a PC project in 3 or 4 years. My new direction of work is b-side background system. I don’t know much about some frameworks (element-UI, Echarts, etc.) and pits, so as to make some records. I also hope to help developers who have the same problems with me.

The problem record

  1. Form form verification problem

    Select verify that the initial value is of the same type as the default value returned by the interface trigger: ‘change’

    Rules :{sex: [{required: true, message: 'Please select gender ', trigger: 'change'}]}Copy the code

  2. The el-Dialog component displays different properties in 2.0 and 3.0

    :visible.sync=””

    v-model=”dialogVisible”

  3. Process table data and render in a loop. You can use slot scope

    <el-table-column prop="status" label="">
  <template #default="scope">
    <div>{{scope.row.status | verifyName}}</div>
  </template>
</el-table-column>
Copy the code

  4. El-upload 2.0 Uploads images

  5. <el-upload
   :disabled= "isDisabled"
   :action="uploadActionUrl"
   :data="uploadData"
   :headers="requestHeader"
   :before-upload="beforeUpload"
   :on-success="function(response, file, fileList) { return handleSuccess(response, file, fileList)}"
   :file-list="picList()"
   :on-preview="handlePictureCardPreview"
   :on-remove="handleRemove"
   :limit="1"
   list-type="picture-card">
  <em class="areaName" v-html="areaName"></em>
</el-upload>
Copy the code

  6. Element – plus the progress bar

  7. Element-plus sets the table header style header-row-class-name

    <el-table 
  :data="tableData" 
  header-row-class-name="table-header" 
  style="width: 100%">
</el-table>
Copy the code

  8. El-input verifies the input number (regular). There are two schemes:

    • Limit input with the regular replace
    • After the input limit, set the Validator to prompt the information
    < el - input v - model = "number" @ input = ". This value = this. The value, the replace (/ / ^. ^ \ d + / g, ") "placeholder =" please enter the content "> < / el - input >Copy the code

  9. Element’s custom style works locally, not in production

    The webpack order is executed from main.js top-down, causing custom styles to be overridden by Element styles, mainly in the following order: ElementUI before Router

    import ElementUI from 'element-ui'
import router from './router'
Copy the code

  10. Element resetFields() reset form not working

    • This method is used to set the data of the form form to its initial value
    • The initial value is assigned during the Form Mounted life cycle
    • ResetFields () is invalid if the form is assigned a value before Mounted, because the initial value of the form is already assigned before Mounted

    Scenario: Edit and create

    Solution: Use this.$nextTick() when assigning, so that the initial value of the form does not change

    $nextTick(() => {this.form = {cityId: null, cityName: ''}}} // Assign this. "12", cityName: 'Beijing'}}) / / reset to express this. $nextTick (() = > {; (this.$refs['formWork'] as any).resetFields() })Copy the code

  11. This.$route.push() error: this.$route.push() error: This

    Data can be updated by activated()