背景

Element UI + VUE + datetimerange + el-date-picker + computed 实现开始结束时间联动

做web管理台时经常需要使用像开始结束时间控件，如：

 
  

    带快捷选项
    
    
  



  export default {
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2: ''
      };
    }
  };

在element ui 控件中是一个model：value2 ; 但是后端给的接口却是这样的：

同理还有：first name 、last name 、full name

容易使用的方法

1. set 方法：直接在表单提交的时候，将一个赋值拆成两个值，然后再传给form表单，达到兼容
2. get 方法：在页面渲染时获取到表单中start 、 end 时间，将其组装到控件的model ：value2

这种是我们比较容易想到，也能实现的方法。但是这种实现属实有点low了 ，可以试试下面的computed方式，来收拢到一个变量计算中实现

computed 实现方法

        
          
            
            
          
        
      

export default {
  name: 'activeRangeComponent',
  props: {
    title: {
      type: String,
      default: '标题'
    }
  },
  data () {
    return {
    
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }, 
      infoForm: {
        id: null,
        name: null,
        startTime: null,
        endTime: null
      }
    }
  },
  computed: {
    timeRange: {
      get () {
        console.log('new get ')
        return [this.infoForm.startTime, this.infoForm.endTime]
      },
      set (newVal) {
        console.log('new set ', newVal)
        this.infoForm.startTime = dateChange.dateFormat(newVal[0], null)
        this.infoForm.endTime = dateChange.dateFormat(newVal[1], null)
      }
    }
  },
  methods: {
  },
  mounted () {
  },
  filters: {}
}

这样就可以监听，同时绑定双方的关系，提交表单时，表单model也是更新后的值，dateChange.dateFormat这里是日期格式化函数~~

最后贴一下官方讲解

https://v2.cn.vuejs.org/v2/guide/computed.html

除此之外，如果你仅需要getter 的话也是可以的，computed 默认就是提供getter的，比如像这样：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})