记录vue使用element ui组件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是一个数组默认绑定了第一个值。

灵感来源

前端道友