Vol开发文档3.5

表单输入框焦点事件

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

vue3代码

<view-grid :modelOpenAfter="modelOpenAfter"></view-grid>

  //方式一（需要2025.11.08更新代码后才能使用）
 //设置查询表单字段焦点(需要设置显示所查询条件才有效,参照:前端开发->查询界面显示所有查询条件)
  gridRef.searchFocus('字段', ($el) => { });
 //设置编辑表单字段焦点(需要弹出框打开后才能使用)
 gridRef.editFocus('字段', ($el) => { });


//方式二
//监听获取焦点事件
gridRef.getFormOption("字段").focus=()=>{
//获取表单其他字段的值或者设置值editFormFields.字段
}

//弹出框打开后设置输入框焦点
const modelOpenAfter () {
    //弹出框打开后给某个字段设置焦点
    setTimeout(()=>{
        gridRef.$refs.form.$refs.字段名[0].focus()
    },200)
}

//或者在触发其他事件时设置焦点
 gridRef.$refs.form.$refs.字段名[0].focus()

vue2 代码


//方式一（需要2025.11.08更新代码后才能使用）
//设置查询表单字段焦点(需要设置显示所查询条件才有效,参照:前端开发->查询界面显示所有查询条件)
 this.searchFocus('字段', ($el) => { });
 //设置编辑表单字段焦点(需要弹出框打开后才能使用)
this.editFocus('字段', ($el) => { });

//方式二
//监听获取焦点事件
this.getFormOption("字段").focus=()=>{
//获取表单其他字段的值或者设置值this.editFormFields.字段
}

//弹出框打开后设置输入框焦点
modelOpenAfter () {
    //弹出框打开后给某个字段设置焦点
    setTimeout(()=>{
        this.$refs.form.$refs.字段名[0].focus()
    },200)
}
//或者在触发其他事件时设置焦点
this.$refs.form.$refs.字段名[0].focus()