element 动态form校验

<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: '请输入内容', trigger: 'blur' }">
        <el-input v-model.trim="item.value" placeholder="请输入内容"></el-input>
      </el-form-item>
</el-form>

prop="'projectList.' + index + '.value'"

页面载入进度条

使用 nprogress 对路由跳转时做一个伪进度条，这样做在网络不好的情况下可以让用户知道页面已经在加载了

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

美化滚动条

::-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);
}

轮询

setTimeout替代setInterval，因为setInterval是固定时间轮询一次，不会考虑接口的响应时间

格式化json

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

element 表单

当只有一个 input 元素，想要回车触发查询方法，发现页面直接刷新，不起作用。

需要使用@submit.native.prevent阻止表单当默认提交

<el-form :inline="true" :model="searchValue" @submit.native.prevent>
	<el-form-item label="应用检索:">
    	<el-input v-model.trim="searchValue.search" placeholder="应用名/应用代号" clearable @keyup.enter.native="_searchApplication"></el-input>
	</el-form-item>
</el-form>

element 级联组件

当需要重置级联当值时，将v-model的值置空，会报错

解决办法：给级联组件加上一个key,置空的同时改变key的值，key++

页面可见

hiddenPage() {
      let vEvent = 'visibilitychange'
      if (document.webkitHidden !== undefined) {
        vEvent = 'webkitvisibilitychange'
      }
      let visibilityChanged = () => {
        if (!(document.hidden || document.webkitHidden)) {
          // 页面可见
          this.postEnvwall()
        }
      }
      document.addEventListener(vEvent, visibilityChanged, false)
    }

el-table添加可展开行

<el-table-column type="expand">
  <template slot-scope="scope">
    <div class="version-layout">
      <ul class="d-flex version-info ul-border">
        <li>内部版本号：{{scope.row.versionCode}}</li>
        <li>外部版本号：{{scope.row.versionName}}</li>
        <li>GIT分支：{{scope.row.gitModel}}</li>
      </ul>
    </div>
  </template>
 </el-table-column>

如果要指定点击表格中某项实现展开行，给该元素添加点击事件，再调用toggleRowExpansion方法，例：

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

如果要实现展开一行，其他行均收起，给表格添加expand-row-keys和row-key属性

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

 expands: []
 getRowKeys(row) {
      return row.id
 },
 expandChange(row, expandedRows) {
 	 if (expandedRows.length > 0) {
     	this.expands = []
      	if (row) {
          this.expands.push(row.id)// 只展开当前行id
        }
     }else {
        this.expands = []
      }
 }

自定义表头

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

 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: '标签'
          }
        }, [
          this.tagOption.map(item => {
            if (item) {
              return h('el-option', {
                props: {
                  value: item,
                  label: item
                }
              })
            }
          })
        ])
      ])
    },