elementUI下拉表单获取label和value和表单回显

最近在做项目时，遇到了一个问题，就是表单回显时回显的数据不对。 例如

html部分：

<el-form-item label="最爱吃的水果:" prop="fruits " >
    <el-select v-model="form.fruits" placeholder="全部">
         <el-option v-for="(obj, index) in form.allFruits" :key="index" :label="obj.label" :value="obj.value"></el-option>
    </el-select>
</el-form-item>

js部分：

data(){
    return{
        form:{
            fruits:"",
            allFruits:[
                {
                    label:"全部",
                    value:"",
                },
                {
                    label:"苹果",
                    value:"apple",
                },
                {
                    label:"香蕉",
                    value:"banana",
                },
                {
                    label:"橙子",
                    value:"Orange",
                }
            ]
        }
    }
}

选中时，form中fruits会接收到选中的value值，label则会显示在选择框里，如果需要把value和label都传给后台时，就无法实现，所以需要把<el-option>中value给改一下，

:value="obj.value + obj.label"

这样，form.fruits的值就会变成 ‘apple + 苹果’，然后用split方法分成两个，

englishName:this.form.fruits.splic('+')[0]
name：this.form.fruits.splic('+')[1]

目前也就找到这一种比较简单易懂的方法来实现。

因为刚刚的提交表单所用到的传参，只是保存，还有修改功能，所以就又遇到了回显的难题，当回显时需要根据数据的唯一标识，比如问题编码来查询数据，查完再回显在表单里，输入框还好，获取到的对应值直接赋值就行，下拉需要赋值给this.form.fruits的是englishName，才能正确显示对应的label，但是当再次提交表单时name就没有值传递过去了。只有重新选择才能再次拿到label和value，显然这是不行的。

然后我就在data里又创建了一个对象echoName:{},因为表单下拉里有好几个下拉框。

echoName:{
    name1:"",
    name2:"",
    name2:"",
}

在回显查询赋值时把对应的值给赋值到新建的对象数据里，这里又出现一个题，就是提交表单时，如果把echoName里存的name值传递到后台，不重新选择下拉里其他选项时，不会出错，如果一但选择其他选项时，

this.form.fruits是一个是 'banana + 香蕉' 
this.echoName.name1是'苹果'

显然是不对的。 所以需要根据this.form.fruits来判断，如果值不包含‘+’ 号，代表没有重新选择，

englishName:this.form.fruits
name：this.echoName.name1

如果有的话就按照之前的值来传递，所以用到三木运算符:

englishName:this.form.fruits.indexOF('+') == -1 ? this.form.fruits :this.form.fruits.splic('+')[0]
name：this.form.fruits.indexOF('+') == -1 ? this.echoName.name1 :this.form.fruits.splic('+')[1]

注：保存和修改接口用到的是不同的

因为经验有限，所以用到的方法都是比较笨的方法，希望各位大佬多多指点。。。