Element Dynamic Form verification

<el-form ref="basicForm" :model="formInfo" label-width="100px" style="max-width: 550px;" v-loading="loading">
      <el-form-item v-for="(item, index) in formInfo.projectList" :key="index" :label="Item. desc + ': '"
                    :prop="'projectList.' + index + '.value'"
                    :rules="{required: item.required, message: 'Please enter the content ', trigger: 'blur'}">
        <el-input v-model.trim="item.value" placeholder="Please enter the content"></el-input>
      </el-form-item>
</el-form>
Copy the code

prop=”‘projectList.’ + index + ‘.value'”

Page loading progress bar

Use nProgress to create a pseudo progress bar for routed jumps to let the user know that the page is loading in case of a bad network

import NProgress from 'nprogress';
router.beforeEach(() = > {
  NProgress.start();
});
router.afterEach(() = > {
  NProgress.done();
});
Copy the code

Beautify scroll bar

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  width: 6px;
  background: rgba(#101F1C, 0.1);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(#101F1C, 0.5);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(#101F1C, 1);
}
Copy the code

polling

SetTimeout replaces setInterval because setInterval polls at a fixed time and does not consider the interface response time

Formatted json

JSON.stringify(JSON.parse(data), null, 2)

Element form

When there is only one input element and you want to enter to trigger the query method, you find that the page is refreshed directly, which does not work.

Need to use @submit.native. Prevent to prevent forms when submitted by default

<el-form :inline="true" :model="searchValue" @submit.native.prevent>
	<el-form-item label="Application Search :">
    	<el-input v-model.trim="searchValue.search" placeholder="App Name/App Code" clearable @keyup.enter.native="_searchApplication"></el-input>
	</el-form-item>
</el-form>
Copy the code

Element cascading component

If the v-model value needs to be reset, an error will be reported

Solution: Add a key to the cascade component, change the key value while emptykey ++

The page is visible

hiddenPage() {
      let vEvent = 'visibilitychange'
      if (document.webkitHidden ! = =undefined) {
        vEvent = 'webkitvisibilitychange'
      }
      let visibilityChanged = () = > {
        if(! (document.hidden || document.webkitHidden)) {
          // The page is visible
          this.postEnvwall()
        }
      }
      document.addEventListener(vEvent, visibilityChanged, false)}Copy the code

El-table adds expandable rows

<el-table-column type="expand">
  <template slot-scope="scope">
    <div class="version-layout">
      <ul class="d-flex version-info ul-border">
        <li>Internal version number: {{scope.row.versionCode}}</li>
        <li>External version number: {{scope.row.versionName}}</li>
        <li>GIT branch: {{scope.row.gitModel}}</li>
      </ul>
    </div>
  </template>
 </el-table-column>
Copy the code

To specify an implementation expansion row in the table, add the click event to the element and call the toggleRowExpansion method, for example:

 expendRow(row) {
     this.$refs.mutipleTable.toggleRowExpansion(row)
 }
Copy the code

To expand a row, expand the other rows and add expansion-row-keys and row-key attributes to the table

 <el-table :data="tableData"
            v-loading="tableLoading"
            @expand-change="expandChange"
            ref="mutipleTable"
            :expand-row-keys="expands"
            :row-key="getRowKeys"
 >
Copy the code

 expands: []
 getRowKeys(row) {
      return row.id
 },
 expandChange(row, expandedRows) {
 	 if (expandedRows.length > 0) {
     	this.expands = []
      	if (row) {
          this.expands.push(row.id)// Expand only the current row ID}}else {
        this.expands = []
      }
 }
Copy the code

Custom table headers

 <el-table-column label="Label" :render-header="(h) => renderHeaderA(h)">
  <template slot-scope="scope">
    {{ scope.row.flag || '-' }}
  </template>
</el-table-column>
Copy the code

 renderHeaderA(h) {
      return h('div', [
        h('el-select', {
          on: {
            input: (value) = > {
              this.tagVal = value
            },
            change: () = > {
              this.parentPkgList = this.pkgList
              }
            }
          },
          props: {
            value: this.tagVal,
            clearable: true.placeholder: 'tags'}},this.tagOption.map(item= > {
            if (item) {
              return h('el-option', {
                props: {
                  value: item,
                  label: item
                }
              })
            }
          })
        ])
      ])
    },
Copy the code