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 ischildren
Field to expandBut there’s nothing in the data that comes back from the back endchildren
This 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
- 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 ischldren
The 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 usedfieldNames
Specify 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…