前端UI框架-iview使用心得

最新推荐文章于 2025-05-31 05:26:52 发布

DQ1005

最新推荐文章于 2025-05-31 05:26:52 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： UI框架

本文链接：https://blog.youkuaiyun.com/DQ1005/article/details/90172111

UI框架专栏收录该内容

1 篇文章

订阅专栏

本文分享了关于iview UI框架中date-picker组件在type='daterange'和'datetime'时的验证方法。针对daterange类型，强调使用value而非v-model以避免数据验证问题，并指出需添加on-change和on-clear事件处理。对于datetime类型，可以通过添加pattern进行验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.date-picker 为 type="daterange"的验证解决方法

<FormItem label="变更起止时间：" prop="modifyTimes">
           <DatePicker
                        :value="form.modifyTimes"
                        format="yyyy-MM-dd"
                        type="daterange"
                        placement="bottom-end"
                        placeholder="请选择起止时间"
                        class="am-datepicker"
                        @on-change="getModifyTimes">
            </DatePicker>
</FormItem>

modifyTimes: [{
    type: 'array',
    required: true,
    fields: {
        0: {type: 'date', required: true, message: '请选择起止日期'},
        1: {type: 'date', required: true, message: '请选择起止日期'}
    }
}],

<!-- format="yyyy/MM/dd" -->
<!-- //type:date  注意当设置了format="yyyy/MM/dd"格式时附上type:date会报错 -->
<!-- 默认格式为：format="yyyy-MM-dd" -->
<!-- 如果报错就将fields中的type: 'date'字段删除掉-->

https://blog.youkuaiyun.com/six66667/article/details/83414855

<!-- 条件选择弹框 -->
    <Modal
        :title="modalTitle" 
        :z-index='1000'
        :width="630"
        v-model="chooseModal.modalVisible" 
        >
        <div>
            <Form ref="formDynamic"  
                inline
                :label-width="125"  
                :model="formDynamic"
                >
                <Row>
                    <FormItem  label="城市"  inline 
                    :prop="'items.' + chooseModal.index + '.city'"
                    :rules="{required: true, message: '城市不能为空', trigger: 'blur'}">
                        <Select  style="width:400px" v-model="formDynamic.items[chooseModal.index].city"  >
                            <Option v-for="item in constant.city" :value="item.city_name" :key="item.id" >{{item.city_name}}</Option>
                        </Select>            
                    </FormItem>
                </Row>
                <Row>
                    <FormItem  label="网元类型" inline
                    :prop="'items.' + chooseModal.index + '.netEleType'"
                    :rules="{required: true, message: '网元类型不能为空', trigger: 'blur'}">
                        <Select style="width:400px" v-model="formDynamic.items[chooseModal.index].netEleType"  >
                            <Option v-for="item in constant.NetEleType.constant" :value="item.value" :key="item.code" >{{item.label}}</Option>
                        </Select>            
                    </FormItem> 
                </Row>
                <Row>
                    <FormItem  label="网元分组" inline
                    :prop="'items.' + chooseModal.index + '.netEleGroup'"
                    :rules="{required: true, message: '网元分组不能为空', trigger: 'blur'}">
                        <Select style="width:400px" v-model="formDynamic.items[chooseModal.index].netEleGroup" >
                            <Option v-for="item in constant.netEleGroup" :value="item.group_name" :key="item.id" >{{item.group_name}}</Option>
                        </Select>            
                    </FormItem>
                </Row> 
                <Row> 
                    <FormItem  label="网元名称" >
                        <Select  style="width:400px" multiple  v-model="formDynamic.items[chooseModal.index].netEleName" >
                            <Option v-for="item in constant.netEleName" :value="item.netele_name" :key="item.id" >{{item.netele_name}}</Option>
                        </Select>            
                    </FormItem>
                </Row>   
                <Row >   

                    <FormItem  label="时间范围" inline 
                    :prop="'items.' + chooseModal.index + '.timeRange'"
                    :rules="{
                            required: true,
                            type: 'array',
                            trigger:'blur',
                            fields: {
                                0: {type:date, required: true, message: '请输入起止日期'},   
                                1: {type:date, required: true, message: '请输入起止日期'}    
                            }
                            }">
                            <!-- format="yyyy/MM/dd" -->
                            <!-- //type:date  注意当设置了format="yyyy/MM/dd"格式时附上type:date会报错 -->
                        <DatePicker 
                        placeholder="选择起始时间" 
                        style="width: 400px"
                        type="daterange"
                        clearable
                        :label-in-value="true"  
                        :value="formDynamic.items[chooseModal.index].timeRange"  
                        @on-change=" v=>{setOption(v,chooseModal.index)} "></DatePicker>
                    </FormItem>
                </Row>
            </Form>
        </div>

        <div slot="footer" style="height: 30px;">
            <div style="float:right">
                <Button  
                icon="md-close"
                style="margin-right: 10px;"
                size='small' 
                @click="handleModalReset('formDynamic')">重置</Button>
                <Button  
                icon="md-checkmark"
                size='small' 
                type="success" 
                @click="handleModalSubmit('formDynamic')" >确定</Button>
            </div>
        </div>
      
    </Modal>

data(){
    return {
            formDynamic: {
                    domain:'PS',             //初始化默认值设置
                    items: [
                        {
                            index: 0,
                            status: 1,       //1显示在页面 0消失 
                            addFlag:1,       //1显示+按钮  0不显示
                            delFlag:0,       //1显示-按钮  0不显示

                            kpiName:'',      //指标名称
                            city: '',
                            netEleType: '',  //网元类型
                            netEleGroup: '',
                            netEleName: '',
                            timeRange: ''   //时间范围默认值设置['','']
                        }
                    ]
                }
            }
}

//时间范围选择器传参
setOption(value,idx){
    this.formDynamic.items[idx].timeRange = value;
},
//DatePicker中的values属性   
//value	日期，可以是 JavaScript 的 Date，例如 new Date()，也可以是标准的日期格式，
例如：yyyy年M月d日：2016年1月1日
MM/dd/yy：12/24/16
H点m分s秒：9点41分0秒
注意：value 使用 v-model 时，值是 Date 类型，可以配合 @on-change 使用，用来设置或获取 时间选择

重点：

A、使用value，不要使用v-model；有可能会在动态设置新值时，存在数据验证问题

B、使用on-change 获取选择的值

C、添加on-clear 事件清除默认值否则会有1970的默认值

clearTime(index){ 
    this.formDynamic.items[index].timeRange = [];
}

2.date-picker 为type="datetime"的验证方式

<DatePicker  v-model="form.chooseDate" placeholder="选择日期" type="datetime" format="yyyy-MM-dd"/>
chooseDate: [{required: true, message: '日期不能为空!', trigger: 'blur', pattern: /.+/}],

后面添加 pattern: /.+/可验证；