1. El-table
1. Data of multiple tables is interlocked or confused.

  • Note: When tabs and V-if/V-show switches are performed on multiple tables in the same component, data in multiple tables may be confused and strung together, causing bugs.

  • Workaround: Specify a unique key attribute for each table.

  • Core code:

<div class="crud__table" v-if="receiverType! =3"> <el-table ref="table" key="table" header-row-class-name="crud-table-header" cell-class-name="crud-table-cell" row-key="id" border stripe highlight-current-row height="100%" style="min-height:405px" v-loading="loading" :data="tableData" > <el-table-column type="selection" width="45" v-if="receiverType==1"/> <el-table-column type="index" Fixed :index="indexMethod" label=" "width="50" align='center'/> <el-table-column label=" Show-overflow-tooltip :render-header="setTableColumnWidth"/> <el-table-column label=" email" prop="email" :render-header="setTableColumnWidth"/> <el-table-column label=" phone "prop="phoneNo" :render-header="setTableColumnWidth"/> <el-table-column label=" status "prop="userStateName" :render-header="setTableColumnWidth"/> </el-table> </div> <div class="crud__table" v-if="receiverType==3"> <el-table ref="groupTable" key="groupTable" header-row-class-name="crud-table-header" cell-class-name="crud-table-cell" border stripe highlight-current-row height="100%" :max-height="tabelHeight" style="min-height:405px" v-loading="loading" :data="groupTableData"> <el-table-column type="selection" width="45"/> <el-table-column type="index" Fixed :index="indexMethod" label=" Width ="50" align='center'/> <el-table-column label=" name" prop="name" show-overflow-tooltip :render-header="setTableColumnWidth"/> <el-table-column label=" createTime" prop="createTime" :render-header="setTableColumnWidth"/> <el-table-column label=" width="290"> <template slot-scope="{row}"> <el-button </el-button> </template> </el-table-column> </el-table> </div>Copy the code
  • Example: Figure 1 shows the effect without key; Figure 2 shows the effect of adding a unique key.

2. Set an independent loading state for each row of the table.

  • Note: The operation buttons in the operation bar of the table (such as authorization and delete) are used to request interface linkage. Adding relatively independent loading states for each line of operations is a user-friendly design with a sense of user experience.

  • This.$set(item, ‘xxLoading’, false) for each item of the table; Set the loading state control for each state.

  • Core code:

<el-table-column label=" operation "width="100"> <template slot-scope="{row}"> <el-button V-if ="row.status! == 1" v-loading=" row.disposeloading "type="primary" size="small" @click="dispose(row)" > dispose </el-button > </template> </el-table-column> js: // getList(currentPage = this.currentPage) {let data = new URLSearchParams(); for (let k in this.search) { if (this.search[k]) { data.append(k, this.search[k]); } } } data.append("current", currentPage); data.append("size", this.pageSize); this.loading = true; API.getList(data) .then((res) => { this.loading = false; if (res.code == 200) { this.tableData = res.data; this.total = res.total; this.currentPage = currentPage; if(this.tableData && this.tableData.length > 0){ this.tableData.map(i => { this.$set(i,'disposeLoading',false) }) } } })  .catch((err) => { this.loading = false; }); Dispose (row) {let data = new URLSearchParams(); data.append("sn", row.sn); row.disposeLoading = true; API.refreshPay(data) .then((res) => { row.disposeLoading = false; If (res.code == 200) {this.$message({message: "handle successfully! , type: "success", showClose: true, }); this.getList(); } else { this.getList(); } }) .catch((err) => { row.disposeLoading = false; this.getList(); }); },Copy the code
  • Example: Renderings are for reference only, not code cases.

3. Table multiple selection combined with paging to realize the memory function of selected rows and realize the dynamic synchronous update of table data and selected data.

  • Note: In actual business development scenarios, el-Table often has the requirement that selected rows retain memory function before and after page turning. The following provides a solution and method for this requirement.

  • Use the selection-change method of element’s table in combination with the paging component to define one for the current page, one for all the selected data, and a flag bit.

  • Core code and explanation link: portal

2. El-input
1. Implementation of passing extra parameters in the change and input event of el-input.

  • Description: el – change of input, the input event is passed a default parameters – (value: a string | number). However, in many business scenarios, we need to pass extra parameters defined by ourselves in the change and input events.

  • —- @change=”((val)=>{changeStatus(val, XXX)})” (XXX is the custom parameter passed).

  • Core code:

<template> <div class="about"> <h1> INPUT </h1> <el-input style="width: 300px; margin-top: @change="val => changeVal(val,'params')" ></el-input> </div> </template> <script> export default { name: "About", data() { return { value: "", }; }, methods: { changeVal(val,params){ console.log(val,params); }}}; </script>Copy the code
  • Example: Figure 1 is the default; Figure 2 shows the effect of adding a layer of arrow functions.

El -select
1. Implementation of passing extra parameters in the change event of el-select.

  • Note: The change event in el-select passes a single parameter — (currently selected) by default. But for many business scenarios, we need to pass our own defined extra parameters in the change event.

  • —- @change=”((val)=>{changeStatus(val, XXX)})” (XXX is the custom parameter passed).

2. How to solve the problem that the page suddenly freezes due to the large amount of data in the options of the EL-select component.

  • Note: In the actual development of the EL-Table component, most of the options in it are provided by the back-end interface. At this time, if there is a large amount of data (for example, tens of thousands of data), the user will be stuck abnormally when clicking the EL-Select selector, and the user experience will be very poor. The following provides a solution and method for this requirement.

  • Workaround: Take the fixed item’s small option (renderOption) from the total options for page rendering, using the el-Select provided

The filter-method method is used to filter and update renderOption with the filter results during the search.

  • Core code and explanation link: portal
Date picker (el-date-picker)
1. Disable the date before the current date (select from today to later than today only).

  • Solution: Use the picker-options attribute of el-date-picker to filter dates.

  • Core code:

<el-date-picker type="date" placeholder=" please select time ":picker-options="pickerOptions" V-model =" ruleform.date" :clearable="false" ></el-date-picker> pickerOptions: DisabledDate (time) {return time.getTime() < date.now () -24 * 60 * 60 * 1000}},Copy the code
2. Select only the date range from today to the future (3 months 90 days is used as an example).

  • Solution: Use the picker-options attribute of el-date-picker to filter dates.

  • Core code:

<el-date-picker type="date" V-model =" ruleform. date2" :picker-options="pickerOptions2" placeholder=" Please select the completion date" :clearable="false" ></el-date-picker> pickerOptions2: {/ / limited appointments disabledDate (time) {return (time. GetTime () < Date. Now () - 24 * 60 * 60 * 1000) | | (time. GetTime () > Date.now() + 90 * 24 * 60 * 60 * 1000) } },Copy the code
Form (el-from)
1. When handling the V-IF, V-show, and auto-increment and auto-decrement form items of the EL-FROM component, there will be form verification exceptions or string item exceptions.

  • Note: Dynamic form is used as an example to deal with abnormal form verification.

  • Workaround: Specify a corresponding and unique key attribute for each el-form-item.

  • Core code:

html: <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" v-loading="loading" Class ="g-form-drawer main" > <template v-for="(item, index) in ruleform. itemList"> <el-form-item label=" ":prop="'itemList.' + index + '. Carrier '" :key="item.key" :rules="{required: true, message: 'Please select carrier', trigger: ['blur', 'change'], }" > <div class="p-form-content"> <el-select class=" W-300 umar-r10" V-model ="item.carrier" placeholder=" filterable clearable > <el-option v-for="i in comList" :key="i.value" :label="i.label" :value="i.value" > </el-option> </el-select> </div> </el-form-item> <el-form-item label=" ":prop="'itemList.' + index + '.packageID '" :key="item.key" :rules="{required: true, message: 'Please select plan package ', trigger: ['blur', 'change'], }" > <div class="p-form-content"> <el-select class="w-300 umar-r10" v-model="item.packageId" Placeholder =" filterable clearable > <el-option V -for=" I in item.packageList" :key=" i.packageID" :label="i.name" :value="i.packageId" > </el-option> </el-select> </div> </el-form-item> <div class="p-form-content bottom-box"> <el-input type="textarea" style="width: 300px" v-model="item.scene" placeholder=" please input business type "></el-input> <el-button v-show="index === 0" class="p-el-button addbtn" type="success" icon="el-icon-plus" circle @click="addProcess" ></el-button> <el-button v-show="ruleForm.itemList  && ruleForm.itemList.length > 1" class="p-el-button delbtn" type="danger" icon="el-icon-delete" circle @click="delProcess(index)" ></el-button> </div> </template> </el-form> js: data() {return {ruleForm: {itemList: [{carrier: ", "packageId:" ", packageList: [], the key: Date, now () / / ensure uniqueness},],}, comList: [], rules: {},}; }, methods: {// add addProcess() {const process = {carrier: "", packageId: ", packageList: [], key: Date.now() // ensure uniqueness}; this.ruleForm.itemList.unshift(process); }, / / delete delProcess (index) {if (this. RuleForm. ItemList && enclosing ruleForm. ItemList. Length > 1) { this.ruleForm.itemList.splice(index, 1); } else {this.$message({message: "at least one ", type: "error", showClose: true,}); }},Copy the code
  • Example: Figure 1 shows the effect without key value (abnormal verification); Figure 2 shows the effect of adding a unique key (normal).

  • El-form dynamic form, the official case is to bind each el-form-item with a key value (:key=”domain.key”), but there is a problem here is the domain object under the keyThere is noOr is itIs not the onlySo the solution is to rewrite the value of the key binding,It has to exist and be unique.
El-pagination.
1. The implementation of pure front-end paging.

  • Background does not deal with paging, will only be in the request of the time all the data back together, at this time the need for their front-end students to deal with the paging, here is briefly described as pure front-end paging.

  • Solution: the front end sends the request to get all the data → the data is processed → the operation paging component completes the effect.

  • Core code and explanation link: portal