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

背景

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

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

<template>
 
  <div class="block">
    <span class="demonstration">带快捷选项</span>
    <el-date-picker
      v-model="value2"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right">
    </el-date-picker>
  </div>
</template>

<script>
  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: ''
      };
    }
  };
</script>

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

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

容易使用的方法

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

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

computed 实现方法

<el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="赛季时间范围" prop="startTime">
            <el-date-picker
                v-model="timeRange"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

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
    }
  }
})