el-date-picker日期选择器使用赋值，回显，必填等

冰淇淋@

已于 2023-06-30 12:14:37 修改

阅读量5.9k

点赞数 3

分类专栏： vue 文章标签： vue

于 2023-05-31 14:59:56 首次发布

本文链接：https://blog.csdn.net/qq_38410795/article/details/130969229

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏


<el-form-item label="考试时间" prop="dates">
            <el-date-picker
              @change="TimeChange"
              v-model="form.dates"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
</el-form-item>

// 表单参数
form: {
   dates:[],
},
// 表单校验
rules: {
   dates: [
      {
        type: 'array',
        required: true,
        message: '请输入考试时间',
        fields: {
           //tpye类型试情况而定,所以如果返回的是date就改成date
           0: { type: 'string', required: true, message: '请选择开始日期' },
           1: { type: 'string', required: true, message: '请选择结束日期' }
        }
      }
   ],
}

/** 修改按钮操作 */
handleUpdate(row) {
	this.reset();
	const id = row.id || this.ids
	getPaper(id).then(response => {
		this.form = response.data;
		//时间回显
		this.$set(this.form,'dates',[this.form.startTime,this.form.endTime])
		this.open = true;
		this.title = "修改考卷";
	});
},
TimeChange(time){
	if(time){
	//给后端的参数
	this.form.startTime = time[0]
	this.form.endTime = time[1]
	}
},