现在有一个下拉组件，后端接收的参数类型是String,参数名roleCode
解决方案1(不考虑异常情况)
<template>
<el-modal :visible="visibleProxy" @ok="onSubmit" @cancel="onCancel">
<el-select
v-model="roleCodeProxy"
:option="roleList"
/>
</el-modal>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
required: true
},
roleCode: {
type: String,
required: true
}
},
data() {
return {
visibleProxy: this.visible,
roleCodeProxy: this.roleCode.split(','),
roleList: []
}
},
watch: {
visibleProxy(val) {
this.$emit('update:visible', val)
}
},
methods: {
onSubmit() {
this.$emit('update:roleCode', this.roleCodeProxy.join())
}
}
}
</script>
代码谈不上好用 更谈不上优雅
解决方案2(不考虑异常情况)
<template>
<el-modal :visible="visibleProxy" @ok="onSubmit" @cancel="onCancel">
<el-select
v-model="roleCodeProxy"
:option="roleList"
/>
</el-modal>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
required: true
},
roleCode: {
type: String,
required: true
}
},
computed: {
visibleProxy: {
get() {
return this.visible
},
set(val) {
this.$emit('update:visible', val)
}
},
roleCodeTmpProxy: {
get() {
try {
return this.roleCodeTmp
.split(',')
.filter(Boolean)
} catch(e) {
console.log(e)
}
return []
},
set(val) {
this.roleCodeTmp = val.join(',')
}
},
},
data() {
return {
roleCodeTmp: this.roleCode || '',
roleList: []
}
},
watch: {
visibleProxy(val) {
this.$emit('update:visible', val)
}
},
methods: {
onSubmit() {
this.$emit('update:roleCode', this.roleCodeTmp)
}
}
}
</script>
