明细表select下拉框联动

[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现
vue3代码
const onInited=()=> {
    //初始化下拉框选中事件
    gridRef.detailOptions.columns.forEach((x) => {
        //ProductName改为你的字段
        if (x.field == 'ProductName') {
            //给下拉框绑定onChange事件
            x.onChange = (row, column) => {
                //设置第二个下拉框的数据源
                selectChange(row, column)
                //这里也可以给其他的字段设置值
                // row.字段=值;
                //也可以给上面的主表表单设置值
                // this.editFormFields.xxx=row.xx;
            }
        }
    })
}
//触发第二个下拉框联动操作
const selectChange=(row, column)=> {
    //找到第二个下拉框选项
    let col = gridRef.detailOptions.columns.find((c) =>{return c.field == '字段'})
    let url = 'api/xxx/xx?value=' + row.ProductName
    //从后台返回第二个下拉框满足条件的数据
    proxy.http.post(url, {}, false).then((keys) => {
        //keys只返回第二个下拉框的key值,用于下面的判断,返回的下拉框key选项显示,没有返回的隐藏
        keys = ['1', '2']
        col.bind.data.forEach((item) => {
            //注意:第二个下拉框选项,在下拉框绑定页面,配置的字典sql需要将全部数据源返回
            //如果返回的数据源有几十W,请考虑用弹出框选择数据,不要用下拉框
            if (keys.indexOf(item.key) != -1) {
             item.hidden = false
            } else {
             item.hidden = true
            }
        })
   })
}