# JS增強—表單API [TOC] > JS增強api圍繞著that關鍵詞 > JS增強定義的方法內可使用 `that`關鍵字，該關鍵字指向當前頁面的vue實例，那就意味著可以用`that`調用任何當前頁面的實例方法/屬性 ## 表單API | 功能描述 | 語法 | 參數 | | --- | --- | --- | | 獲取某下拉組件的下拉選項 | that.getSelectOptions(field) | field：字段名稱 | | 設置某下拉組件的下拉選項 | that.changeOptions(field,options) | field：字段名稱<br>option：新設置的下拉選項 每一項由value和label組成 | | 改變表單的值 | that.triggleChangeValues(param) | param：表單值對象，格式{控件名:控件值} | | 進入表單頁面立即觸發change事件，需要在js增強中定義show方法, 給immediateEnhance賦值true | that.immediateEnhance = true | 當為true則，進入表單頁若有change事件立即觸發，否則不會，默認false | | 獲取當前表單數據 | 見下 | | | 獲取某個字段的值 | 見下 | | | 修改某個字段的值 | 見下 | | | 發起ajax請求 | getAction,postAction,deleteAction | 方法參數參考src/api/manage.js | | 時間格式化 | that.simpleDateFormat(millisecond, format) | millisecond:毫秒數，<br>format:yyyy-MM-dd hh:mm:ss 根據需求自定義格式 | | lodash | that.lodash.methodName | 具體使用什么工具方法參考[lodash官方文檔](https://lodash.com) | | 自定義按鈕函數內需要關閉表單彈窗 | that.$emit("onSuccess",formdata) | formdata:表單數據，可以不傳 | ## 表單事件 | 事件方法 | 描述 | | --- | --- | | ~~show~~ | 頁面表單初始化時觸發（不支持獲取數據） | | loaded | 表單數據加載完成后觸發 （支持獲取表單數據） | | beforeSubmit | 表單數據提交之前 [詳細文檔](http://doc.jeecg.com/2061290) | ## API代碼 ### 初始化表單方法 ``` show(){ console.log('form',that) //this.form.setFieldsValue({"name":"name值"}) that.$nextTick(() => { //age是對應表的字段名 that.form.setFieldsValue({"age":"age值"}) }); } ``` ### 修改字段值 > 字段采用online表單配置的字段英文名 ``` that.triggleChangeValue("字段",“值”) ``` ### 獲取全部表單數據 ``` let formData = that.form.getFieldsValue() ``` ### 獲取表單字段值 ``` let sex = that.form.getFieldValue("sex") ``` ### 字段值變更觸發方法 > ruz\_date 是字段名字，所有的字段觸發方法都統一寫在方法onlChange里。 > onlChange()方法必須與前一段代碼有`回車`或者`空格`，否則會報錯。 ``` onlChange(){ return { ruz_date(){ let value = event.value //alert('觸發控件',value) //根據入職日期，自動計算出入職年數 if(value!=null && value!=""){ let currDate = new Date(value.replace(/-/g, "\/")); let d = new Date(); let ru_year_num = d.getFullYear()-currDate.getFullYear() let values = {'ru_year_num':ru_year_num + 1} that.triggleChangeValues(values) } } } } ``` ### 修改表單字段下拉屬性 ``` that.changeOptions(field,options) ``` > 疑問：此方法能否涉及到 radio、select、搜索下拉等功能。 ### 修改表下拉屬性 ## 示例 ### 通過頁面多個字段計算出某個字段的值 參考示例： * [單表或主表](http://doc.jeecg.com/2044110) * [從表改主表](http://doc.jeecg.com/2186818) ### 三級聯動示例（ajax） 參考示例：[點擊查看](http://doc.jeecg.com/2044120) ### 動態的控制字段組件的顯示與隱藏 參考示例：[點擊查看](http://doc.jeecg.com/2044107) ### 動態的控制字段組件是否禁用\[不支持\] ``` //示例：調用simpleDateFormat格式化時間 show(){ console.log(that.simpleDateFormat(new Date().getTime(),'yyyy年MM月dd日 hh時mm分ss秒')); } ```