This is the second day of my participation in the August More text Challenge. For details, see:August is more challenging

Front-end framework emerge in endlessly, although million changes do not leave its zong, but for small white 🤦🏻♂️ to get started also need a process

For just working for me 🤡, the first official use of the new framework, completely by their own exploration and Baidu, write more than a month, but also summed up a bit of things, some small details or worth recording, leave a memorial

Real projects always face a variety of requirements, there is no time to learn, only to do it, from the actual situation is the best way to learn. 👏 🏻 👏 🏻 👏 🏻

The first time TO use the new framework, there will always be some bumps, even with the API introduction, but some of them are not familiar with it, so I also recorded some ways to use from the actual practice

Form the Table

Specifies the field to expand the child data

In the official website, there is the seed node can expand the tree operation, but only the child data ischildrenThe field can only be expandedBut 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:

Control the displayed data from columns

Roles are an array, a person can have multiple roles, without using slots how to display multiple role names under a person?

If you use slots, you can use v-for loops to facilitate names, but there’s 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 felt I could not understand the introduction on the official website, so I recorded it in my own words

First define these two fields in the table tag:

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

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

Total Is assigned when obtaining background data. Total is the total number of pieces of data

pagination:{ 
  total:0.defaultPageSize:10.// By default, a table displays several pieces of data
  showTotal: total= >${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 the method to fetch the background data, passing in parameters

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

Copy the code

From the FETCH, you pass in the page turning information, the number of pages, the number of pieces of data per page, and when the FETCH gets the data, it assigns it to the table

Click on the row to jump

You need to set the customRow event in a-Table, and the event name

And then in methods, I’ll write the click event

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

// In the methods,record is the current message when clicked
 rowClick(record){
      return{
        on: {click:() = >{
            // Logic 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”. The two types assign values and modify data in different ways. Please refer to the documents for details

Custom form validation

Prop and the corresponding rule name and $refs, must be the same; The function of the validation rule should be written in data; The name of the verification rule should be written in the return of data and related parameters should be configured

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

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

Validator: validatePhone is the name of the custom validation rule. It is a method written in data above return

Error in form assignment

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

This error occurs when I use this.form.setFieldsValue, which is my code

This. Form. setFieldsValue must be a parameter used in the form

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

The solution:

Use timer

Cascade selector Cascader

Customize the subfield name, value and label

When the cascading selector is used as a city selector, it needs to obtain data from the interface by itself, and only the field of the data ischldrenCan normally display the city or countySometimes, however, the interface data field obtained from the back end does not match the API, so it can be usedfieldNamesSpecify the field name and data name

You can configure it this way

Date selector

Custom date format

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

Format Sets 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

Moment and format are used to change the date format if the date format is only day, month and year

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 framework of learning is very broken very miscellaneous, here only recorded a little, there is a long way to go

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