vue3 级联操作下拉框

susu1083018911

已于 2024-04-30 16:27:49 修改

阅读量88

点赞数 3

文章标签： vue.js 前端 javascript

于 2024-04-30 16:07:36 首次发布

本文链接：https://blog.csdn.net/susu1083018911/article/details/138348938

版权

watch([() => param.sort, () => param.pageIndex, () => param.dep], ([newSort, newPageIndex, newDep], [oldSort, oldPageIndex, oldDep]) => {
            if (newSort !== oldSort || newPageIndex !== oldPageIndex) {
                //todo 重新获取列表
               
            } else if (newDepart !== oldDepart) {
                // 重置选中值
                param.personCode = ""; 
                getPerson()
            }
});

const getPerson=()=>{ 
            selectData.person =[{ name: "请选择人员", val: "" }];
            request.getPersonList( {type:3,departMent:param.dep} ).then(res=>{                
                if(res.status){
                    res.list.forEach(item=>{
                        selectData.person.push({
                            name:item.name,
                            val:item.name
                        })
                    })                                              
                } 
           })                      
}

请注意getPerson方法没有传递参数，如果传参，请注意下面写法selectData.person不能当作参数传入进来！！！！

 watch([() => param.sort, () => param.pageIndex, () => param.dept], ([newSort, newPageIndex, newDep], [oldSort, oldPageIndex, oldDep]) => {
            if (newSort !== oldSort || newPageIndex !== oldPageIndex) {
                //todo 加载列表
            } else if (newDep !== oldDep) {
                param.personCode = ""; // 重置人员选中值
                wParam.departMent=newDepart;
                getPerson(wParam);
            }
});

 const bindPersonParam=(info)=>{ 
            selectData.person =[{ name: "请选择人员", val: "" }];
            request.getPersonList( info ).then(res=>{                
                if(res.status){
                    res.list.forEach(item=>{
                        selectData.person.push({
                            name:item.name,
                            val:item.name
                        })
                    })                                              
                } 
            })                      
}

const wParam=reactive({
            type:3,
            departMent:''
})

其他方法监测变量：

watch([()=>param.sort, ()=>param.pageIndex, ()=>param.dept], (newValue, oldValue) => {
            Object.keys(newValue).forEach((key) => {
                if (JSON.stringify(newValue[key]) !== JSON.stringify(oldValue[key])) {
                  console.log(`Object ${key} changed.`);
                  
                }
              });
})