fix: 修复Select组件change事件返回值

刘汉宸
1 parent e6018051
Showing 2 changed files with 16 additions and 7 deletions Show diff stats
examples/views/docs/component/select.md
packages/select/index.vue
@@ -207,7 +207,7 @@ export default {
 <template>
   <div>
     <pre class="demo-model" v-if="model">{{ model }}</pre>
-    <z-select v-model="model" url="/user/select" :http="$http"></z-select>
+    <z-select v-model="model" url="/user/commonSelect" value-key="id" :http="$http" @change="onChange"></z-select>
   </div>
 </template>
  
@@ -218,6 +218,11 @@ export default {
       model: '',
     }
   },
+  methods: {
+    onChange(value, item) {
+      console.log(value, item);
+    }
+  }
 }
 </script>
 ```
@@ -133,21 +133,25 @@ export default {
     remote() {
       return Boolean(this.queryApi || (this.url && (this.http || this.zHttp)));
     },
+    // Hack绑定事件，即令el-select组件绑定事件与当前z-select组件相同，且扩展部分事件返回值
     bindEvents() {
       let _events = {};
       Object.keys(this.$listeners || {}).forEach(key => {
         // 非绑定对象的情况下，通过change事件向上emit出当前选中项
         if (key === 'change' && !this.raw) {
+          // 给el-select绑定change事件，且emit到z-select的change事件并拓展
           _events[key] = value => {
             this.$emit(
               key,
               value,
-              this.optionsCurrent.reduce((result, item) => {
-                if (value.includes(item[this.valueKey])) {
-                  result.push(item);
-                }
-                return result;
-              }, []),
+              this.multiple
+                ? this.optionsCurrent.reduce((result, item) => {
+                    if (value.includes(item[this.valueKey])) {
+                      result.push(item);
+                    }
+                    return result;
+                  }, [])
+                : this.optionsCurrent.find(item => item[this.valueKey] === value),
             );
           };
         } else {
...	...	@@ -207,7 +207,7 @@ export default {
207	207	<template>
208	208	<div>
209	209	<pre class="demo-model" v-if="model">{{ model }}</pre>
210		- <z-select v-model="model" url="/user/select" :http="$http"></z-select>
	210	+ <z-select v-model="model" url="/user/commonSelect" value-key="id" :http="$http" @change="onChange"></z-select>
211	211	</div>
212	212	</template>
213	213
...	...	@@ -218,6 +218,11 @@ export default {
218	218	model: '',
219	219	}
220	220	},
	221	+ methods: {
	222	+ onChange(value, item) {
	223	+ console.log(value, item);
	224	+ }
	225	+ }
221	226	}
222	227	</script>
223	228	```
...	...
...	...	@@ -133,21 +133,25 @@ export default {
133	133	remote() {
134	134	return Boolean(this.queryApi \|\| (this.url && (this.http \|\| this.zHttp)));
135	135	},
	136	+ // Hack绑定事件，即令el-select组件绑定事件与当前z-select组件相同，且扩展部分事件返回值
136	137	bindEvents() {
137	138	let _events = {};
138	139	Object.keys(this.$listeners \|\| {}).forEach(key => {
139	140	// 非绑定对象的情况下，通过change事件向上emit出当前选中项
140	141	if (key === 'change' && !this.raw) {
	142	+ // 给el-select绑定change事件，且emit到z-select的change事件并拓展
141	143	_events[key] = value => {
142	144	this.$emit(
143	145	key,
144	146	value,
145		- this.optionsCurrent.reduce((result, item) => {
146		- if (value.includes(item[this.valueKey])) {
147		- result.push(item);
148		- }
149		- return result;
150		- }, []),
	147	+ this.multiple
	148	+ ? this.optionsCurrent.reduce((result, item) => {
	149	+ if (value.includes(item[this.valueKey])) {
	150	+ result.push(item);
	151	+ }
	152	+ return result;
	153	+ }, [])
	154	+ : this.optionsCurrent.find(item => item[this.valueKey] === value),
151	155	);
152	156	};
153	157	} else {
...	...