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;
          }
        }
      },
    }
}

表格及渲染函数渲染

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() 响应式新增与修改数据

调用方法：Vue.set( target, key, value )

target：要更改的数据源(可以是对象或者数组)

key：要更改的具体数据

value ：重新赋的值

取当前click的数据、删除当前元素的父元素的父元素 及 时间戳转换

html

<Row>
  <Col span="8" v-for="(item,index) in cardList">
    <Card>
      <p>{{item.content}}</p>
      <p>{{timestampToTime(item.changeTime)}}</p><!-- 时间戳转换调用 -->
      <Button @click="deleteDiy(item,$event)" type="error">删除</Button>
    </Card>
  </Col>
</Row>

js

export default {
  data() {
    return {
      cardList: [
        {
          changeTime: '1535612507000', //时间戳
          content: '前端测试'
        },
        {
          changeTime: '1535612507000',
          content: '前端测试1'
        },
        {
          changeTime: '1535612507000',
          content: '前端测试2'
        }
      ]
    }
  },
  methods: {
    // 转换时间戳
    timestampToTime(timestamp) {
      var date = new Date(timestamp*1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      var D = date.getDate() + ' ';
      var h = date.getHours() + ':';
      var m = date.getMinutes() + ':';
      var s = date.getSeconds();
      return Y+M+D+h+m+s;
    },
    // 点击取值事件
    deleteDiy(item,event){
      let div = event.currentTarget.parentNode;//event获取当前元素父节点
      div.parentNode.parentNode.removeChild(div.parentNode);//删除父节点的父节点
      console.log(item) // 取当前点击的数据，index取索引
    }
  }
}