|  | @@ -0,0 +1,59 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +  <el-select v-model="simpleValue" v-bind="$attrs" v-on="$listeners">
 | 
	
		
			
				|  |  | +    <el-option v-for="(opt,idx) in options" :key="idx" v-bind="toSimpleAttrs(opt)"></el-option>
 | 
	
		
			
				|  |  | +  </el-select>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +export default {
 | 
	
		
			
				|  |  | +  name: 'ComplexSelect',
 | 
	
		
			
				|  |  | +  model: {
 | 
	
		
			
				|  |  | +    prop: 'value',
 | 
	
		
			
				|  |  | +    event: 'change'
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  props: {
 | 
	
		
			
				|  |  | +    value: {
 | 
	
		
			
				|  |  | +      type: String | Number | Object | Array // Any type
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    options: {
 | 
	
		
			
				|  |  | +      type: Array // options source
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    binder: {
 | 
	
		
			
				|  |  | +      type: Function, // value binder for v-model
 | 
	
		
			
				|  |  | +      default: item => item
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    map: {
 | 
	
		
			
				|  |  | +      type: Object, // display map for el-select
 | 
	
		
			
				|  |  | +      default: () => ({
 | 
	
		
			
				|  |  | +        label: item => item,
 | 
	
		
			
				|  |  | +        value: item => item,
 | 
	
		
			
				|  |  | +        disabled: item => false
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  computed: {
 | 
	
		
			
				|  |  | +    simpleValue: {
 | 
	
		
			
				|  |  | +      get() {
 | 
	
		
			
				|  |  | +        const item = this.options.find(item => this.binder(item) == this.value)
 | 
	
		
			
				|  |  | +        return this.map.value(item)
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      set(val) {
 | 
	
		
			
				|  |  | +        const item = this.options.find(item => this.map.value(item) == val)
 | 
	
		
			
				|  |  | +        const outerVal = this.binder(item)
 | 
	
		
			
				|  |  | +        this.$emit('change', outerVal)
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  methods: {
 | 
	
		
			
				|  |  | +    toSimpleAttrs(option) {
 | 
	
		
			
				|  |  | +      const attrs = {}
 | 
	
		
			
				|  |  | +      Object.keys(this.map).forEach(key => attrs[key] = this.map[key](option))
 | 
	
		
			
				|  |  | +      return attrs
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<style scoped>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +</style>
 |