Vol开发文档3.5

编辑表单隐藏、显示

动态隐藏、显示表单配置

隐藏前
隐藏后
事件绑定
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中；二选一实现

vue3 代码

//方式1,通过select选择触发显示与隐藏
const onInit = ($vm) => {
    gridRef = $vm;
    //获取订单类型select配置,当前订单类型select改变值时,动态设置Remark,SellNo两个字段是否显示
    var orderTypeOption = gridRef.getFormOption("OrderType");
    orderTypeOption.onChange = (val) => {

    //当订单类型select改变值时,如果选中的是发货(对应字典编号为2),emark,SellNo隐藏否则显示出来
    var remarkOption = gridRef.getFormOption("Remark");
    remarkOption.hidden=val == "2"
    
    var sellNoOption = gridRef.getFormOption("SellNo");
    sellNoOption.hidden=val == "2"
}
//方式2,通过打开弹出框时触发显示与隐藏
const modelOpenAfter=(row)=> {  //编辑或新建时，根据不同的情况控制字段是否显示
    //   editFormOptions.forEach(x => {
    //     x.forEach(item => {
    //       if (item.field == "Remark" || item.field == "SellNo") {
    //         //如果不是新建，则隐藏Remark,SellNo两个字段是否显示
    //          //也可以根据row当前编辑行的值来处理
    //         item.hidden=val == this.currentAction != "Add"
    //       }
    //     })
    //   })
}

vue2 代码

//方式1,通过select选择触发显示与隐藏
onInit () {
    //获取订单类型select配置，当前订单类型select改变值时，动态设置Remark,SellNo两个字段是否显示
    var orderTypeOption = this.getFormOption("OrderType");
    orderTypeOption.onChange = (val) => {

    //当订单类型select改变值时，如果选中的是发货(对应字典编号为2)，emark,SellNo隐藏，否则显示出来
    var remarkOption = this.getFormOption("Remark");
    remarkOption.hidden=val == "2"
    
    var sellNoOption = this.getFormOption("SellNo");
    sellNoOption.hidden=val == "2"
},
//方式2,通过打开弹出框时触发显示与隐藏
modelOpenAfter (row) {  //编辑或新建时，根据不同的情况控制字段是否显示
    //   this.editFormOptions.forEach(x => {
    //     x.forEach(item => {
    //       if (item.field == "Remark" || item.field == "SellNo") {
    //         //如果不是新建，则隐藏Remark,SellNo两个字段是否显示
    //          //也可以根据row当前编辑行的值来处理
    //         item.hidden=val == this.currentAction != "Add"
    //       }
    //     })
    //   })
}

编辑表单隐藏、显示

ON THIS PAGE