DatePicker日期范围选择器
日期组件代码
<el-col :span="15">
<el-form-item label="起止时间">
<fc-date-duration type="daterange" format="yyyy-MM-dd" v-model="rangeDate" :key="rangeDate[0]"
value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开始日期"
end-placeholder="结束日期" range-separator="至" clearable>
</fc-date-duration>
</el-form-item>
</el-col>
<!--编辑按钮利用slot-scope="scope"将当前行数据传入方法-->
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
rangeDate在data中赋值
<script>
import {report,addreport,updatereport} from "@/api/report";
export default {
name: "Outreport",
data(){
return{
rangeDate=['开始日期','结束日期'],
}
},
methods: {
//初始化方法,每次修改和添加时掉用
reset(){
this.rangeDate=['开始日期','结束日期'],
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
if(this.rangeDate[0]!='开始日期'){//拆分数组数据
this.form.startTime=this.rangeDate[0];
this.form.endTime=this.rangeDate[1];
}
if (this.form.id != undefined) {//更新
updatereport(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
}
});
} else {//新增
addreport(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
}
});
}
}
});
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
//此处为上方从js处引入方法,请求后端数据
report(id).then(response => {
this.rangeDate=[response.data.startTime,response.data.endTime];
if(this.rangeDate[0]==null||this.rangeDate[0]==''){
this.rangeDate=['开始日期','结束日期'];
}
this.form = response.data;
this.open = true;
this.title = "修改数据";
});
},
}
}
report.js
import request from '@/utils/request'
export function report(id) {//编辑按钮触发查找数据
return request({
url: '/report/list/' + id,
method: 'get'
})
}
//返回数据格式为json
createTime: "2020-08-17 20:14:08"
endTime: "2020-08-18"
//新增接口
export function addreport(data) {
return request({
url: '/report/add',
method: 'post',
data: data
})
}
//更新接口
export function updatereport(data) {
return request({
url: '/report/update',
method: 'put',
data: data
})
}
数据展示
1
2
3点击新增时调用this.reset()
重点是一个属性,费了好几个小时,希望可以帮助到大家,在组件的v-model="rangeDate"后面添加一个属性
:key="rangeDate[0]
即可实现根据数组中的数据动态刷新,我的rangeDate是一个数组默认绑定了第一个值。