1:iview 组件DatePicker,TimePicker
在on-change事件中添加修改时,不能实时绑定:
定义了如下DatePicker组件(dynDate.vue):
<template> <DatePicker type="date" @on-change="change" v-model="abc"/> </template> <script> export default { props: { name: '' }, data() { return { abc: '' } }, methods: { change(e) { // console.log(this.abc, this.name) this.$emit('dd-date', this.abc, this.name) } } } </script>
父类中获取改变的值(dynForm.vue):
<template> <Form> <FormItem v-for="(item,index) in paramList" :key="index" :label="item.name" clearable style="margin: 0px" > <div v-if="item.category=='textbox'" size="small"> <dny-input :name="item.field" @dd-input="getDnyInput"/> </div> <div v-else-if="item.category=='date'" size="small"> <DynDate :name="item.field" @dd-date="getDnyInput"></DynDate> </div> <div v-else-if="item.category=='datetime'" size="small"> <DynTime :name="item.field" @dd-time="getDnyInput"></DynTime> </div> <div v-else-if="item.category=='combobox'" size="small"> <dyn-select :name="item.field" :listValue="cityList" @dd-select="getDnyInput"> </dyn-select> </div> </FormItem> </Form> </template> <script> methods: { getDnyInput(arg, name) { for (let v of this.paramList) { if (v.field === name) { v.value = arg console.log("input value" + arg) } } console.log(this.paramList) }, } </script>
此代码主要是为了动态从paramList中获取表单类型(paramList中有个field),然后生成对应的form表单控件。
在输入对应数据后,在paramList中添加一列value用于保存表单填的值。在本场景中,datePicker的值不能动态获取改变的值(只会获取上次改变的值)
变通的场景是,在timePicker中将on-change事件改为on-open-change:
<TimePicker type="time" format @on-open-change="change" v-model="abc"/>
而在datePicker中则需还需加入confirm属性:
<DatePicker :confirm=true type="date" @on-open-change="change" v-model="abc"/>