One: read table data

<div>
    <div class="btnfile">
       <el-button type="primary">Select the file</el-button>
       <el-button type="primary" @click="upload(2)">To upload</el-button>
    </div>
    <div class="inputfile">
        <input
         ref="fileInput"
         class="input-file"
         type="file"
         accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
         @change="exportData"
         >
     </div>
</div>
Copy the code
// Upload file processing method
exportData(event) {
   if(! event.target.files.length)return
   this.target = event.target.value.substring(event.target.value.lastIndexOf('\ \') + 1)
   var f = event.currentTarget.files[0]
   var reader = new FileReader()
   var that = this
   FileReader.prototype.readAsBinaryString = function(f) {
    var binary = ' '
    var wb // Read the finished data
    var outdata // The data you need
    var reader = new FileReader()
    reader.onload = function(e) {
     // Read into Uint8Array and convert to Unicode (Unicode is two bytes)
     var bytes = new Uint8Array(reader.result)
     var length = bytes.byteLength
     for (var i = 0; i < length; i++) {
      binary += String.fromCharCode(bytes[i])
     }
     XLSX = XLSX
     wb = XLSX.read(binary, {
      type: 'binary'.cellDates: true
     })
     // Data array
     outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
     that.readTist = outdata //data{} defines a variable readTist assignment
     outdata = []
     event.target.value = ' '
    }
    reader.readAsArrayBuffer(f)
   }
   reader.readAsBinaryString(f)
  }
  // Start uploading
  upload(val) {
      this.exslsArrange(this.readTist)
  },
Copy the code
// Import table data processing
    exslsArrange(outdata) {
      this.selections = []
      var that = this
      if (outdata.length === 0) {
        return this.$message.error('Number of data uploaded is empty, please upload again')}else {
        outdata.forEach(function(value, index) {
          const obj = {
            name: ' '.mobile: ' '.newMobile: ' '
          }
          obj.name = value['Member Account']? value['Member Account'] : ' '
          obj.mobile = value['Mobile phone Number']? value['Mobile phone Number'] : ' '
          obj.newMobile = value['Mobile phone number of follow-up after modification']? value['Mobile phone number of follow-up after modification'] : ' '
          that.selections.push(obj)// Final data ！！！！！
          that.progress = ((index + 1) / outdata.length) * 100})}},Copy the code

Two: the object array method

1. Traversal mode of an object
let num = 18
let person = {
    name: 'xiecheng'.age: 34.school: 'imooc',}//for in
for (let key in person) {
    console.log(key, person[key])//key is the attribute name, obj[key] is the attribute value
}

console.log(object.keys(person)) // Print an array of all attribute names: ['name','age','school']
object.defineProperty(person, 'sex', {// Add attributes, add configuration items
    value:'male'.enumerable:true.//// controls whether attributes can be enumerated. The default value is false
    writable: true.// Controls whether attributes can be modified. The default value is false
	configurable:true // Controls whether attributes can be divided by peng. The default value is false
))
console.log(object.keys(person)) // Print an array of all attribute names: ['name','age','school']
Copy the code
2. Add attributes to the object and delete attributes
let obj = { name: 'xiecheng' }
this.$set(this.obj,"set".24) // Add attributes
this.$delete(data, name) // Delete attributes
Copy the code
Object. Is (obj1,obj2)
let obj1 = { name: 'xiecheng'.age: 34 }
let obj2 = { name: 'xiecheng'.age: 34 }
console.log(obj1 == obj2) // false
console.log(Object.is(obj1, obj2)) // false
Copy the code
4. Array adds/removes elements
// Add element method push()
let arr = []
this.arr.push(1.2) // result output: 1,2
/ / delete
var fruits = ["Banana"."Orange"."Apple"."Mango"];
fruits.splice(2.2); // Delete two elements from the index 2, the result is :Banana,Orange
// Delete add insert
var fruits = ["Banana"."Orange"."Apple"."Mango"];
fruits.splice(2.1."Lemon"."Kiwi"); / / since the subscript 2 remove one element, add two elements, result output: Banana, Orange, Lemon, Kiwi, and Mango
// Do not delete the insert
var fruits = ["Banana"."Orange"."Apple"."Mango"];
fruits.splice(2.0."Lemon"."Kiwi"); Subscript 2 / / start deleting zero element, add two elements, and the results output: Banana, Orange, Lemon, Kiwi, Apple, Mango
Copy the code
5. Array traversal

(1) forEach() returns no value, just calls func forEach element

let arr = [{name: 'cloud park', the age:21}, {name: 'yunjin', the age:22}]
this.arr.forEach((item, index) = > {
    console.log(item, index);
})
Copy the code

(2) Map () returns a new, processed array, but does not change the value of the original array.

var a = [1.2.3.4.5]
var b = a.map((item) = > {
    return item = item * 2
})
console.log(a)  / / [1, 2, 3, 4, 5]
console.log(b)  / /,4,6,8,10 [2]

// change the data type in the array
 let arr = ["21"."122"."3323"]
 arr = arr.map(Number)
 console.log(arr)
Copy the code

(3) Filter () Filter method

let selections = [{name: 'cloud park', the age:21}, {name: ' ', the age:22}]
const temArr = selections.filter(v= >v.name ! = =' ')
console.log(temArr)  [{name: 'yunus', age: 21}]
Copy the code
<template>
  <div>
   <el-table>
      <el-table-column label="Import time" width="150px" align="center">
        <template slot-scope="scope">{{ scope.row.insertTime | timeFormat }}</template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import moment from 'moment'
export default {
  filters: {
    timeFormat(value) {
      if (value <= 0) {
        return ' '
      } else {
        return moment(value).format('YYYY-MM-DD HH:mm:ss')}}}}</script>
Copy the code

(4) Some () returns Boolean to determine whether any element meets the func criteria

let arr = [{name: 'cloud park', the age:21}, {name: 'yunjin', the age:22}]
let result = arr.some(val= > val.name === 'cloud park')
console.log(result)  //true
Copy the code

(5)every() returns Boolean that every element meets the func condition

let arr = [{name: 'cloud park', the age:21}, {name: 'yunjin', the age:22}]
let result = arr.every(val= > val.name === 'cloud park')
console.log(result)  //false
Copy the code

(6) The find() method returns the value of the first element in the array that satisfies the provided test function, otherwise undefined.

The findIndex() method returns the index of the first element in the array that satisfies the provided test function. Otherwise -1 is returned.

<template>
   <div>
      <el-table-column label="SKU name" width="250px" align="center">
        <template slot-scope="scope">
         {{ arrName.find(v => v.id === scope.row.productId) ? arrName.find(v => v.id === scope.row.productId).name : '' }}
         {{ arrName.findIndex(v => v.id === scope.row.productId) }}
        </template>
      </el-table-column>
   </div>
</template>
<script>
	export default {
      data() {
    	return {
            arrName: [{name: 'aaa'.id: 111}, {name: 'bbb'.id: 222}}}}],</script>
Copy the code

Call multiple interfaces at the same time

async changeName(val) {
   const p1 = new Promise((resolve, reject) = > {
    resolve(getAuditInfoDetail({ accountId: val }))
   })
   const p2 = new Promise((resolve, reject) = > {
    resolve(getSalesmanInfo({ accountId: val }))
   })
   const allField = await Promise.all([p1, p2])
   const [res, resName] = allField
   if (res.data && res.respCode === '0000') {
    console.log(res);
   }
   if (resName.data && resName.respCode === '0000') {
    console.log(resName); }},Copy the code

Four: Validate both Element UI forms

Element FORM validation: (trigger: ‘change’ –> validation when data changes)/(trigger: ‘blur’ –> validation when focus is lost)

<template>
 <! -- Test Details page -->
  <div>
    <div class="basic-info">&nbsp;Basic information of the enterprise to be graded</div>
      <! (ref="ruleForm") -->
  	<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto" style="width:1000px;">
       <el-form-item label="Company Name" prop="companyName">
    ​    <el-input v-model.trim="ruleForm.companyName" placeholder="Please enter company name"></el-input>
       </el-form-item>
       <el-form-item label="Name" prop="name">
    ​    <el-input v-model.trim="ruleForm.name" placeholder="Please enter your name"></el-input>
       </el-form-item>
       <el-form-item label="Id Card No." prop="idNumber">
    ​    <el-input v-model.trim="ruleForm.idNumber" placeholder="Please enter your ID card number"></el-input>
       </el-form-item>
       <el-form-item label="Mobile phone number" prop="phoneNumber">
    ​    <el-input v-model.trim="ruleForm.phoneNumber" placeholder="Please enter your mobile phone number."></el-input>
       </el-form-item>
       <el-form-item label="Bank Card Number" prop="bankCardNumber">
    ​    <el-input v-model.trim="ruleForm.bankCardNumber" placeholder="Please enter your bank card number"></el-input>
       </el-form-item>
  	</el-form>
    <div v-if="isText" class="basic-info">&nbsp;Please enter the score indicator information</div>
      <! (ref="pan") -->
  	<el-form :model="scoreCardTest" label-width="auto" style="width:1000px;" ref="pan">
      <div v-for="(item,index) in scoreCardTest.list" :key="index">
   		<el-form-item :label="item.name" :prop="`list.${index}.value`" 
                      :rules="{required: true, message: 'Please enter ${item.name}', trigger: 'blur'}" v-if="item.dataType ! = 8">
​    		<el-input :placeholder="' Please enter '+item.tips" v-model="item.value"></el-input>
   		</el-form-item>
   		<el-form-item :label="item.name" :prop="`list.${index}.value`" 
                      :rules="{required: true, message: 'Please select ${item.name}', trigger: 'chage'}" v-else>
​    		<el-select v-model="item.value" style="width:280px;">
​     			<el-option v-for="option in item.values" :key="option" :label="option" :value="option"> </el-option>
​    		</el-select>
   		</el-form-item>
   	  </div>
  	</el-form>
  	<div class="btn">
   		<el-button type="primary" :disabled = ! "" isText" @click="submitForm()">confirm</el-button>
   		<el-button type="info" :disabled = ! "" isText" @click="resetForm('ruleForm')">reset</el-button>
   		<el-button @click="returnPrevious">return</el-button>
 	</div>
  </div>
 </div>
</template>
<script>
export default {
 data() {
  const isCardId = (rule, value, callback) = > {
   if(! value) {return new Error("Please enter your ID number)"); 
   } else {
​    const reg = /^\d{6}(18|19|20)? \d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/;
​    const card = reg.test(value);
​    if(! card) { callback(new Error("Id card format: 423024XXXX0216XXXX"));
​    } else{ callback(); }}}return {
   tacticsId: ' '.scoreCardTest: {},
   scoreCardList: [].isText: false.ruleForm: {
​    applyInfo: {},// Request information form
​    companyName: ' '.// Company name
​    name: ' './ / name
​    idNumber: ' './ / id card
​    phoneNumber: ' '.// Mobile phone number
​    bankCardNumber: ' '.// Bank card number
   },
   rules: {
​    companyName: [
​     { required: true.message: 'Please enter business name or Social Uniform Credit code'.trigger: 'blur' }
​    ],
​    name: [
​     { required: true.message: 'Please enter your name'.trigger: 'blur' }
​    ],
​    idNumber: [
​     { required: true.message: 'Please enter your ID card number'.trigger: 'blur' },
​     { validator: isCardId, trigger: 'blur' }
​    ],
​    phoneNumber: [
​     { required: true.message: 'Please enter your mobile phone number'.trigger: 'blur' }
​    ],
​    bankCardNumber: [
​     { required: true.message: 'Please enter your bank card number'.trigger: 'blur'}]}}; },methods: {
  // Confirm the submission
  async submitForm() {
   try {
   const formName = ['ruleForm'.'pan']
   // Define the function validates
   const validates = (item) = > {
​    return new Promise((resolve, reject) = > {
​     if (!this.$refs[item]) {
​      resolve()
​      return false
​     }
    //validate is a component-defined function used for form validation
​     this.$refs[item].validate((valid) = > {
​      if (valid) {
​       resolve()
​      } else {
​       reject(new Error('Wrong verification')}})})}// Loop through the form validation function
   Promise.all(formName.map(item= > validates(item))).then(() = > {
​    this.submitFormByTacticsId()// Form validation was successfully invoked
   }).catch((e) = > {
​    console.log(e)
   })
   } catch (error) {
​    console.log(error); }},/ / reset
  resetForm(formName){},// Submit the interface
  async submitFormByTacticsId(){}}};Copy the code

Vue +elementUI uses formatter to convert data

/ / list the column<el-table-column label="Gender" align="center" prop="cadreSex" :formatter="formatSex" />FormatSex (row){return row.cadresex === 0? "Male" : row.cadreSex === 1? "Female" : "not filled "; },Copy the code