iview DatePicker添加表单验证、初始化赋值、选择器额外配置

最新推荐文章于 2023-12-07 10:12:29 发布

原创

最新推荐文章于 2023-12-07 10:12:29 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用Vue框架实现日期选择器组件，包括时间范围查询功能，通过设置不可选日期、快捷选项和验证规则，提升用户体验。

<Form class="search_form" ref="searchForm" :rules="ruleInline" :model="formInline" label-position="right" :label-width="80">
	<FormItem prop="searchTime" label="查询时间">
	    <DatePicker type="datetimerange" 
	        v-model="formInline.searchTime" 
	        format="yyyy-MM-dd HH:mm:ss"  
	        placeholder="请选择查询时间范围" 
	        @on-change="getChange"
	        :transfer=true
	        :options="timeOptions"
	        style="width: 100%"></DatePicker>
	</FormItem>
	<FormItem class="btn_container">
        <div class="btn_save" @click="handleSubmit('searchForm')">查询</div>
        <div class="btn_cancel" @click="handleReset('searchForm')">重置</div>
    </FormItem>
</Form>

data() {
   
   
    return{
   
   
        formInline: {
   
   
            searchTime: [],
            startTime: [],
            endTime: []
        },
        ruleInline: {
   
   
            searchTime: [{
   
   
                type: 'array',
                required: true,
                fields: {
   
   
                    0: {
   
   type