vue.js,iview 的一些坑

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"/>