element ui中一些组件常见的注意事项

select选择器

拿label值：
方法1：value绑定options数组的对象，在change事件中，取value和label

<el-select v-model="value" placeholder="请选择" @change="getLabel">
 <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item">
 </el-option>
</el-select>

getLabel(value) {
	this.value = value.value
	this.label = value.label
}

方法2：在change事件中，通过遍历循环options数组，和绑定的model进行匹配查询，然后拿到label

<el-select v-model="value" placeholder="请选择" @change="getLabel">
 <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
 </el-option>
</el-select>

getLabel(value) {
	this.value = value
	options.forEach((e)=>{
		if(e.value == value) {
			this.label = e.label
		}
	})
}

方法3：通过在组件上绑定ref,然后this.$refs.selectLabel.selectedLabel或者this.$refs.selectLabel.selected.label获得label值，这种方法不推荐，因为组件版本不同，或者组件本身问题，拿值不准确，有时候错乱，建议不使用此方法

<el-select ref='selectLabel' v-model="value" placeholder="请选择" @change="getLabel">
 <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
 </el-option>
</el-select>

getLabel(value) {
	// 因为element ui版本不同，拿的方式不同
	this.label = this.$refs.selectLabel.selectedLabel
	this.label = this.$refs.selectLabel.selected.label
}

cascader级联选择器

1、获取label值不准确错乱

cascader组件开启搜索filterable=true拿的label值有问题不准确，不开启搜索可以，解决方案可以通过遍历循环通过value拿到label或者通过接口code去查label。

<el-cascader :props="areaProps" :options="areaOptions" ref="cascaderArr" v-model="areaCodeArr" @change="handleChange" filterable></el-cascader>

handleChange(value) {
	this.$refs.cascaderArr.currentLabels // 开启搜索filterable拿的label值有问题不准确，不开启搜索可以
}

2、点击tag删除，删除展示错乱

cascader级联选择器开启多选数据回显的时候，如果后端返回的回显数据和下拉值数据顺序不对，那就点击tag删除的时候，删除错乱，虽然结果是删除了，但是展示的有问题，解决方案，处理一下后端回显的数据，从小到大排列，网上的其他方案，说是在赋值之前将已勾选的值（getCheckedNodes的值）赋值给v-model绑定的值就行了，我试了没有效果，但是处理了数据就好了。解决的根本是一样的，但是后者我没有实现

upload上传

upload上传组件 before-upload返回false会触发on-remove事件，如果有限制文件大小和有文件删除的，解决方案是在on-remove事件也判断一下文件大小，然后在文件大小不超过限制的情况下删除

时间有限，此篇文章后续会持续更新中，欢迎讨论交流。。。