Real projects are always faced with a variety of requirements, there is no time to learn, only to do, learn from the actual situation is the best way.

When using a new framework for the first time, there are always some bumps in the road. Even with API introduction, I can’t understand some of them until I get used to them, so I also recorded some ways of using them in practice

Form the Table

Specifies the field to expand the child data

The website has this tree operation that you can expand with children, and only the child data ischildrenField to expandBut there’s nothing in the data that comes back from the back endchildrenThis field

Use the childrenColumnName to specify the field name for the child data:

Control the data displayed from columns

A role is an array. One person can have multiple roles. How can multiple role names be displayed under one person without using slots?

If you use slots, you can use the V-for loop to facilitate the name, but there is an easier way:

Can be in the role of the columns in the field, written customRender, customRender rendering function is used to generate complex data, parameters of the current row value respectively, the current row, row index

The pager

I feel that the introduction written on the official website does not understand, so I write down in my own words

Define these two fields in the table’s label:

:pagination="pagination" // Pagination is an object
 @change="tableChange" // Click to go to the page turning method
Copy the code

Then define the Pagination object in the data and populate the data

Total Specifies the total number of data items

pagination:{ 
  total:0.defaultPageSize:10.// By default, a table displays several pieces of data
  showTotal: total= >${total}showSizeChanger:true.pageSizeOptions: ['5'.'10'.'15'.'20'].onShowSizeChange:(current, pageSize) = >this.pageSize = pageSize 
 },
Copy the code

Click to turn the page:

This. fetch is a method that gets background data and passes in parameters

tableChange(e){
  this.fetch({
    page:e.current,
    page_size:e.pageSize
  })
  console.log('Switched',e)
}

Copy the code

The fetch passes in the page-turning information, such as the number of pages and the number of pieces of data on a page. After the fetch gets the data, it assigns values to the table

Click on the row to jump

You need to set the customRow event and event name in the A-table

Click events in Methods

<a-table
  :columns="nextInterHead"
  :data-source="nextInterview"
  class="a-table"
  :pagination="false"
  :customRow="rowClick"
>

// Record is the current information that is clicked
 rowClick(record){
      return{
        on: {click:() = >{
            // Logical code
            console.log("Clicked",record)
            this.$router.push({
              path: '/candidate/detail'.query: { id: record.id },
            })
            
          }
        }
      }
    }
  },
Copy the code

Form the Form

There are two types of forms: Form and FormModel. These two types have different ways of assigning values and modifying data. For details, please refer to the documentation

Custom form validation

Prop is the same as the rule name and $refs. Functions to verify rules are written in data; The verification rule name must be written in the return of data and related parameters must be configured

<a-form-model-item ref="phone" label="Mobile phone Number" prop="phone">
    <a-input
      placeholder="Please fill in your phone number."
      v-model="form.phone"
      @blur=" () => { $refs.phone.onFieldBlur(); }"
    />
</a-form-model-item>

// Write in the data
  data() {
    // Check the phone number
    let validatePhone = (rule, value, callback) = > {
      let reg = /^1\d{10}$/ 
      if (value === ' ') {
        return callback(new Error('Please enter your mobile phone number'));
      }else if(! reg.test(value)){return callback(new Error('Please enter the correct mobile phone number'));
      }
      callback()
    };
    //
    return {
        rules: {
            phone: [{ required: true.validator: validatePhone, trigger: 'blur'}],,}}}Copy the code

ValidatePhone is the name of a custom validation rule. It is a method written inside data and next to return

Form assignment error reported

You cannot set a form field before rendering a field associated with the value

This error occurs when using this.form.setFieldsValue. This is my code

This.form. setFieldsValue can only be used as a parameter in the form

  1. This is because the DOM node is assigned before it is rendered

The solution:

Use timer

Cascade selector Cascader

Customize subfield name, value, and label

When the cascade selector is used as a city selector, provinces, cities and counties need to obtain data from the interface by themselves, and only the data field ischldrenThe city or county can be displayed normallySometimes, however, the interface data fields retrieved from the back end do not match the API, so they can be usedfieldNamesSpecify the field name and data name

You can configure it this way

Date picker

Custom date format

Display the default time: use default-value and V-model together

Format Specifies the default date format

 <a-date-picker
  @change="onChangeTime"
  format="YYYY-MM-DD"
  :default-value="form.establish_time? moment(form.establish_time,'YYYY-MM-DD'):null"
  v-model="form.establish_time"
  placeholder="Please select the date of incorporation."
/>

import moment from 'moment';

  methods: {
    moment,
}
Copy the code

If the date has hours, minutes and seconds, and the background only needs the date format, use moment and format to convert the date format

moment(date).format('YYYY-MM-DD')
Copy the code

However, an error may occur when displaying the previously selected date:

Solution: When assigning a date, use the moment function to format item.import_date as the date

this.importTime = moment(item.import_date,'YYYY-MM-DD')
Copy the code

The study of the framework is very fragmented and miscellaneous, only a little has been recorded here, and there is a long way to go

www.antdv.com/docs/vue/in…