前端

TableExpandeSub.vue 是當前內嵌table 主頁 裡邊的create 還有匯入 匯出 增加是在jeecglistminxin.js 內 官網說為了簡便程式碼

先看主頁新增功能

<div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>

點選進入

handleAdd 函式 在本頁未定義  在

D:\demo\jeecg-boot\ant-design-vue-jeecg\src\mixins\JeecgListMixin.js

JeecgListMixin.js  中定義了

handleAdd: function () {
      this.$refs.modalForm.add();   //
      this.$refs.modalForm.title = "新增";
      this.$refs.modalForm.disableSubmit = false;
    },

this.$refs 是什麼鬼? 

ref 有三種用法：

　　1、ref 加在普通的元素上，用this.ref.name 獲取到的是dom元素

　　2、ref 加在子元件上，用this.ref.name 獲取到的是元件例項，可以使用元件的所有方法。

　　
 
3、如何利用 v-for 和 ref 獲取一組陣列或者dom 節點

主頁下 那個ref 標籤  意思是頁面載入完之後就可以用這個表單區域內代表頁面的內定義的值了 如下邊則是
JeecgOrderDMainModal.vue 這個編輯 新增頁的

 <!-- 表單區域 -->
    <jeecgOrderDMain-modal ref="modalForm" @ok="modalFormOk"></jeecgOrderDMain-modal>

回到上邊

add() 實際呼叫的

JeecgOrderDMainModal.vue 這個 增加 修改 跳出框的頁面的內容
add()內容為空 給edit函式傳空

   methods: {
      add() {
        this.edit({});
      },
      edit(record) {
        this.form.resetFields();  // 最終在是框架庫中的方法
        this.orderMainModel = Object.assign({}, record);
        //初始化明細表資料
        console.log(this.orderMainModel.id)
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.orderMainModel, 'orderCode', 'ctype', 'orderMoney', 'content'))
          this.form.setFieldsValue({orderDate: this.orderMainModel.orderDate ? moment(this.orderMainModel.orderDate) : null}) //時間格式化
        });
        console.log(this.orderMainModel)
      },

上邊 this.form.resetFields();  // 是如何呼叫的呢

JeecgOrderDMainModal.vue 內data 中定義的變數綁定了

form: this.$form.createForm(this), 算是新生成物件賦值給form 了

我們看一下

this.$form.createForm(this) 

這個是ant-design-vue UI元件裡面的form元件，建立form例項的方法

https://www.antdv.com/components/form-cn/

 this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.orderMainModel, 'orderCode', 'ctype', 'orderMoney', 'content'))
          this.form.setFieldsValue({orderDate: this.orderMainModel.orderDate ? moment(this.orderMainModel.orderDate) : null}) //時間格式化
        });