element ui 使用 el-select做联动动态绑定二级下拉框默认值

Question

因为项目设计需要，Cascader 级联选择器不符合项目的设计，但同时需要有联动功能，故所以使用两个el-select做联动处理

求解怎么让我在我选中 第一级 选项的时候 第二级 动态自动显示处理过后数组的第一项

html：

<!-- 一级 -->
<el-form-item label="选择：" >
    <el-select 
    v-model="addPopupDepend.selectValuelev1"
    placeholder="请选择"
    >
        <el-option
            v-for="item in addPopupDepend.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        >
        </el-option>
    </el-select>
</el-form-item>
<!-- 二级 -->
<el-form-item label="选择：">
    <el-select 
    v-model="addPopupDepend.selectValuelev2"
    placeholder="请选择"
    >
        <el-option
            v-for="item in addLev2Linkage"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        >
        </el-option>
    </el-select>
</el-form-item>

js：

data(){
    return{
        addPopupDepend:{ // ! 添加系时需要的东西
                options: [
                    {
                        value:'test1',
                        label:'test1',
                        children:[
                            value:'123',
                            label:'123'
                        ]
                    },
                    {
                        value:'test2',
                        label:'test2'
                        children:[
                            value:'456'
                            label:'456'
                        ]
                    }
                ],
                // * 一级下拉框
                selectValuelev1:'',
                // * 二级下拉框      
                selectValuelev2:'',

            },
    }
},
computed: {
    // * 联动
    addLev2Linkage(){
        if(this.addPopupDepend.selectValuelev1 == '') return []
        else return this.addPopupDepend.options.filter((val,index)=>{return val.value == this.addPopupDepend.selectValuelev1})[0].children
    },
}

因为项目中还有其他类似这种的双级联el-select
所以最好不要写成像这样无法复用的函数

methods:{
    setval(){
        this.addPopupDepend.selectValuelev2 = addLev2Linkage[0].value
    }
}

求解怎么设计处理函数

Answer 1

已解决，根据vue侦听器的特性，直接传对象修改

<el-select 
v-model="addPopupDepend.selectValuelev1" 
placeholder="请选择" 
class="add-from-select-left" 
@change="clearLinkageval(addLev2Linkage,addPopupDepend)
">
</el-select>



clearLinkageval(upperSelectLevelArr,upperSelectLevelVal,num=2){
            if(upperSelectLevelArr.length == 0) upperSelectLevelVal[`selectValuelev${num}`] = ''
            else upperSelectLevelVal[`selectValuelev${num}`] = upperSelectLevelArr[0].value
}