前端
TableExpandeSub.vue 是当前内嵌table 主页 里边的create 还有导入 导出 增加是在jeecglistminxin.js 内 官网说为了简便代码
先看主页新增功能
<div class="table-operator"> <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
点击进入
handleAdd 函数 在本页未定义 在
D:demojeecg-bootant-design-vue-jeecgsrcmixinsJeecgListMixin.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/
方法 | 说明 | 类型 |
---|---|---|
getFieldDecorator | 用于和表单进行双向绑定,单文件 template 可以使用指令v-decorator 进行绑定,详见下方描述 |
|
getFieldError | 获取某个输入控件的 Error | Function(name) |
getFieldsError | 获取一组输入控件的 Error ,如不传入参数,则获取全部组件的 Error | Function([names: string[]]) |
getFieldsValue | 获取一组输入控件的值,如不传入参数,则获取全部组件的值 | Function([fieldNames: string[]]) |
getFieldValue | 获取一个输入控件的值 | Function(fieldName: string) |
isFieldsTouched | 判断是否任一输入控件经历过 getFieldDecorator 或 v-decorator 的值收集时机 options.trigger |
(names?: string[]) => boolean |
isFieldTouched | 判断一个输入控件是否经历过 getFieldDecorator 或 v-decorator 的值收集时机 options.trigger |
(name: string) => boolean |
isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) |
resetFields | 重置一组输入控件的值(为 initialValue )与状态,如不传入参数,则重置所有组件 |
Function([names: string[]]) |
setFields | 设置一组输入控件的值与错误状态。 | Function({ [fieldName]: { value: any, errors: [Error] } }) |
setFieldsValue | 设置一组输入控件的值 | Function({ [fieldName]: value }) |
validateFields | 校验并获取一组输入域的值与 Error,若 fieldNames 参数为空,则校验全部组件 | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) |
validateFieldsAndScroll | 与 validateFields 相似,但校验完后,如果校验不通过的菜单域不在可见范围内,则自动滚动进可见范围 |
参考 validateFields |
this.$nextTick(() => { this.form.setFieldsValue(pick(this.orderMainModel, 'orderCode', 'ctype', 'orderMoney', 'content')) this.form.setFieldsValue({orderDate: this.orderMainModel.orderDate ? moment(this.orderMainModel.orderDate) : null}) //时间格式化 });