明细表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
}
})
})
}
vue2 代码
onInited() {
//初始化下拉框选中事件
this.detailOptions.columns.forEach((x) => {
//ProductName改为你的字段
if (x.field == 'ProductName') {
//给下拉框绑定onChange事件
x.onChange = (row, column) => {
//设置第二个下拉框的数据源
this.selectChange(row, column)
//这里也可以给其他的字段设置值
// row.字段=值;
//也可以给上面的主表表单设置值
// this.editFormFields.xxx=row.xx;
}
}
})
},
//触发第二个下拉框联动操作
selectChange(row, column) {
//找到第二个下拉框选项
let col = this.detailOptions.columns.find((c) =>{return c.field == '字段'})
let url = 'api/xxx/xx?value=' + row.ProductName
//从后台返回第二个下拉框满足条件的数据
this.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
}
})
})
}