ElementUI使用随记

1、el-select中:remote-method默认的参数为输入的值，添加自定义参数，可以返回一个匿名函数来访问内部变量可以在外部调用中获取到内部的变量值，而且每次调用完才会消失在栈内存中。

:remote-method=“(val) => remotePeopleMethod(val, otherVal)”

<el-select
 	v-model="renovation.inspector"
   filterable
   remote
   reserve-keyword
   placeholder="请输入员工姓名"
   :remote-method="(val) => remotePeopleMethod(val, otherVal)"
   :loading="loadingPeople"
   value-key="name">
   <el-option
     v-for="(item,index) in peoplesList"
     :key="index"
     :label="item.realName"
     :value="item.userId">
   </el-option>
 </el-select>
 js:
remotePeopleMethod (val,  otherVal) {
	console.log(val,  otherVal)
}

2、el-select中若value为数值型，正确进行回显 :value="0"

<el-select v-model="formData.companyId" size="mini" placeholder="请选择" style="width: 100%">
   <el-option label="全公司通用" :value="0"></el-option>
   <el-option v-for="item in companysData" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>

3、表单验证规则动态修改后自动进行验证

this.$refs.formName.validateField('licenseCode') // ‘licenseCode’: prop属性值，form的ref为‘formName’

4、表单验证，清空某个表单元素的验证提示；清空form数据：resetFields

this.$refs[refName].clearValidate() // ref：某元素的ref值 (PS：$refs.refName)

5、上一步中清空表单的事件不起作用，原因可能有以下几种：

a：检查 form标签中绑定的数据对象是否正确，要用 :model，不可用v-model；

<el-form :model="dataForm" ref="dataForm" label-width="70px">
</el-form>

b：查看每个el-form-item标签后是否添加对应的prop属性，要与表单元素绑定(v-model)的数据一致；ref 要与 v-model="xxx"中的 一致；

<el-form-item label="真实姓名" size="mini" prop="realName">
  <el-input v-model="dataForm.realName" placeholder="真实姓名" maxlength="16"></el-input>
</el-form-item>

6、表单校验 —— 动态添加的列表型元素的rules校验

实例：动态添加删除输入框，输入框格式为必填与特殊校验

<el-form class="confirmForm" :model="formData" ref="formData" label-width="auto" :rules="rules">
  <el-row :gutter="10">
	<div v-for="(item, index) in formData.oldFkRecordNoList" :key="index">
	  <el-form-item size="mini" style="position: relative;" :prop="'oldFkRecordNoList.' + index + '.id'" :rules="rules.fkRecordNo">
	    <el-input v-model="item.id" size="mini" onkeyup="value=value.toUpperCase()" maxlength="16"></el-input>
	    <el-button type="danger" class="addBtn" icon="el-icon-minus" @click="toRemove(index)" circle></el-button>
	  </el-form-item>
	</div>
  </el-row>
</el-form>

// script data
export default {
  data () {
  	return {
  	  rules: {
		 fkRecordNo: [
		    { required: true, message: '必填', trigger: 'blur' },
		    { validator: notSpecial, trigger: ['blur'] }
		  ]
		},
		formData: {
		  oldFkRecordNoList: []
		}
  	}
  }
}

注： for 循环的为form表单中的list v-for="(item, index) in formData.oldFkRecordNoList" :key="index"，动态添加的prop必须为 :prop :prop="'oldFkRecordNoList.' + index + '.id'"

7、el-input 搜索框在手机端的使用

使用软键盘启动搜索事件。
用： keyup.enter.native，此时搜索时页面会整个刷新，所以需要给 el-form 添加阻止默认提交事件 @submit.native.prevent

<el-form :model="search" ref="search" label-width="45px" class="search-form" @submit.native.prevent>
	<el-input type="text" v-model="search.id" name='search' placeholder="请输入查询的维修单号" @keyup.enter.native="getDatas"></el-input>
</el-form>
        

8、更改element 元素样式

如果是css，可以使用 /deep/ 或 ::v-deep，如果是scss，只能用 ::v-deep

// css 或 scss
/deep/ .el-select {
	width: 100%;
}
// scss
::v-deep .el-select {
	width: 100%;
}

9、table表格中获取当前行的index

<template slot-scope='{row, $index}'>
	{{$index}}
</template>

10、table 选择selection中隐藏选中框，显示选择label

直接样式控制

.el-table /deep/.DisabledSelection .cell .el-checkbox__inner{
  display:none;
  position:relative;
}
.el-table /deep/.DisabledSelection .cell:before{
  content:"选择";
  position:absolute;
  right 11px;
}

11、table选择回显（单选），多选多一个批量匹配列表数据

主要执行方法是：this.$refs.tableRef.toggleRoSelection(row)

父组件中：index.vue

checkRegulation () {
	this.regulationVisible = true;
	this.$nextTick(() => {
		this.$refs.regulationRef.init(this.selectedRegulation)
	})
}

table.vue

<el-table
	:data='tableList'
	ref='tableRef'
	:row-key='(row) => {return row.flowId}'
	@selection-change='handleSelectionChange'
>
 <el-table-column type='selection' :reserve-selection='true'></el-table-column>
 ....
</el-table>

// js
methods: {
	async init(row) {
		this.initInfo = JSON.parse(JSON.stringify(row));
		await this.getList(); // 获取列表数据
		this.$nextTick(() => {
			this.tableList.forEach((row) => {
				if (row.flowId === this.initInfo.flowId) {
					this.$refs.tableRef.toggleRowSelection(row, true);
					return;
				}
			})
		})	
	},
	handleSelectionChange (val) {
		if (val.length > 1) { // 因为此处单选
			this.$refs.tableRef.clearSelection();
			this.$nextTick(() => {
				this.$refs.tableRef.toggleRowSelection(val.pop());
			})
		}
		this.multipleSelection = val;
	}
}

12、el-menu 做路由跳转时，在有的浏览器报错：Loading chunk 12 failed.

是因为没有用正确的el-menu，而是在里面嵌套了 <router-link>。
正确的使用 el-menu的 router 与 route 属性

 <el-menu class="el-menu-demo" mode="horizontal"
   :default-active="currentPath" :router="true">
     <el-menu-item index="home" :route="{path: '/home'}">首页</el-menu-item>
     ...
</el-menu>

13、二次封装上传组件时，当上传格式错误，但仍旧走了remove方法

onRemove(file,fileList){
    if(file.status == 'success'){
        //删除后改变某些状态的代码
    }
    if(file.status == 'ready'){
        //这里应该就是before-upload中返回false时的状况了，还有没有别的状况，未知
    }        
}

14、input 去掉空格

<el-input v-model.trim="input"/>
或者
<el-input type="textarea" v-model="input" @input="input= input.replace(/[ ]/g,'')"></el-input>

15、el-table 重新渲染组件

利用 el-table 的 key 值，设置为一个时间戳，每次获取完数据之后，判断key值发生了变化，会重新渲染组件；

<el-table
  v-loading="loading"
  :key="timeStamp"
   border
   :data="resultList"
 >
   <el-table-column prop="status" label="结果码"></el-table-column>
   ...
</el-table>
<script>
export default {
	data () {
		...
		timeStamp: ''
	},
	mounted () {
		this.timeStamp = new Date().getTime();
	},
	methods: {
		getData() {
			...
			registeAPI
	        .getOcrResultList(params)
	        .then((res) => {
	        	this.resultList = res.data;
	        	this.timeStamp = new Date().getTime();
	        	....
			})
		}
	}
	....
	
}
</script>

16、form 数据重置，必须在data form中初始过此参数（常用于表单清空）；

Object.assign(this.$data.formInline, this.$options.data().formInline);