vue 中使用iview的一些知识点

仅作为自己学习的记录。

日历DatePicker结束时间不能小于开始时间。

html

<DatePicker type="date" :options="startTimeData" @on-change="startTimeChange" placeholder="请选择开始时间" v-model="starttime"></DatePicker>

<DatePicker type="date" :options="endTimeData" @on-change="endTimeChange" placeholder="请选择结束时间" v-model="endtime"></DatePicker>

js 

export default {
    data() {
      return {
        startTimeData: {}, 
        endTimeData: {},
        starttime: '',
        endtime: ''
      }
    },
    methods: {
//开始时间
      startTimeChange: function(e) { 
      // 当前日期之前不可选
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000;
        }
        this.starttime = e;
        this.endTimeOptions = {
          disabledDate: date => {
            let startTime = this.starttime ? new Date(this.starttime).valueOf() : '';
            return date && (date.valueOf() < startTime);
          }
        }
      },
//结束时间
      endTimeChange: function(e) { 
        this.endtime = e;
        let endTime = this.endtime ? new Date(this.endtime).valueOf() - 1 * 24 * 60 * 60 * 1000 : '';
        this.startTimeOptions = {
          disabledDate(date) {
            return date && date.valueOf() > endTime;
          }
        }
      },
    }
}

Table 表格及渲染函数render

html 

<Table :columns="columnsTab" :data="dataTab"></Table>

js

export default {
    data () {
        return {
            columnsTab: [
                {
                    title: 'Name',
                    key: 'name'
                },
                {
                    title: 'Age',
                    key: 'age'
                },
                {
                    title: 'Address',
                    key: 'address',
                    render: (h, params) => {
                        return h('div', [
                              h('Button', {
                                props: {
                                  type: 'primary',
                                  size: 'small'
                                },
                                style: {
                                  marginRight: '5px'
                                },
                                on: {
                                  click: () => {
                                    this.show(params.index, params.row)
                                  }
                                }
                              }, '编辑'),
                              h('Button', {
                                props: {
                                  type: 'error',
                                  size: 'small'
                                },
                                on: {
                                  click: () => {
                                    // 方法及传参
                                    this.remove(params.index) 
                                  }
                                }
                              }, '删除')
                        ]);
                    }
                }
            ],
            dataTab: []
        }
    },
    mounted (){
        this.onChange();
    },
    methods: {
        onChange(){
            let url = '接口地址';
            this.$http.get(url).then(function(response){
                if(response.status === 200){
                    this.$Message.success('加载成功');
                    // response.data 的json放入columnsTab的key
                    this.dataTab = response.data;
                };
            }, function () {
                this.$Message.error('加载失败,请检查接口是否正常!');
                  // 失败回调
            });
        }
    }
}

实时更新Vue.set