|
@@ -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>
|