iView 的Table自定义筛选组件(render函数)

2019-08-07笔记

iView自带的筛选组件是Checkbox类型的，而项目要求时间组件(datepicker)进行条件筛选，使用iView的Table自带renderHeader函数添加poptip和datepicker组件来实现。

实现效果如下：

部分代码如下：

renderHeader中代码：

renderHeader: (h, params) => {
 //捕获this,使得this指向为window,如果此处捕获this无效，则需要在data的return之前捕获
          let self = this;
            return h('span', {class: 'poptip'   // 修改poptip内边距},
               [
                h('span', '制单时间'),   //表格当前列标题
                h('Poptip', {
                  props: {
                    placement: 'bottom',
                    transfer: false,
                    width: "196px",
                    trigger: 'click',
                    offset: 3,
                    transfer: 'true'
                  },
                  style: {
                    'font-weight': '400'
                  }
                }, [
                    h('Icon', { //筛选图标
                      props: {
                        type: "ios-funnel",
                        color: "#B9BCCD",
                        size: "12",
                      },
                      style: {
                        'margin-left': '4px'
                      }
                    }),
                    h('div', {
/* poptip的content用slot方式来展示内容，
注意slot与props,styles,class写法一样，都单独一级写出来*/
                      slot: 'content',
                      class: 'datepicker-style',   // 调整datepicker样式
                    }, [
                        h('span', '时间筛选'),   //当前筛选标题是时间筛选
                        h('p', {
                          style: {
                            margin: '12px 0'
                          }
                        }, [
                            h('span', '从'),
                            h('DatePicker', {//开始时间
                              props: {
                                placeholder: '选择时间',
                                type: 'datetime',
                                format: 'yyyy/MM/dd HH:mm',
 //绑定当前datepicker的值，使得datepicker能够和v-model一样双向绑定
                                value: self.startTime
                              },
                              style: {
                                'margin-left': '4px',
                                width: '160px',
                                height: '24px',
                              },
                              on: {
                               'on-change': (val) => {
                                  //绑定当前datepicker选中的值
                                  self.startTime = val;   
                                },
                              }
                            }),
                          ]),
                        h('p', [
                         h('span', '至'),
                          h('DatePicker', {
//结束时间，(这里没有限制开始时间和结束时间之间的前后关系)
                            props: {
                              placeholder: '选择时间',
                              type: 'datetime',
                              format: 'yyyy/MM/dd HH:mm',
                              value: self.endTime
                            },
                            style: {
                              'margin-left': '4px',
                              width: '160px',
                              height: '24px',
                            },
                            on: {
                              'on-change': (val) => {
                                self.endTime = val
                              },
                            }
                          }),
                        ]),
                        h('Button', {
                          props: {
                            type: 'text'
                          },
                          style: {
                            float: 'right',
                            outline: '0',
                            'box-shadow': 'none',
                            padding: '0',
                            margin: '8px 0 4px 16px'
                          },
                          on: {
                            'click': () => {
                              self.resetPicker();
                            }
                          }
                        }, '重置'),
                        h('Button', {
                          props: {
                            type: 'text',
                          },
                          style: {
                            float: 'right',
                            outline: '0',
                            'box-shadow': 'none',
                            padding: '0',
                            margin: '8px 0 4px 16px'
                          },
                          on: {
                            'click': () => {
                              self.getFlowList();
                            }
                          }
                        }, '筛选'),
                      ]),
                  ]
                )
              ]
            )
          },

在<script></script>里面的data return定义startTime和endTime

data(
//renderHeader捕获this不成功
//let self = this;
return{
startTime:'',
endTime:'',
})

在methods中：
获取表格数据
getFlowList(){},
重置datepicker

resetPicker () {
      this.startTime = '';
      this.endTime = ''
    },

修改自写组件poptip,datepicker的样式(为符合ui要求)

<style lang="stylus">
.poptip
  .ivu-poptip-body
    padding 8px
.datepicker-style
  .ivu-input, .ivu-input-default
    height 24px
  .ivu-input-prefix i, .ivu-input-suffix i
    line-height 24px
</style>

2019-08-14更新

补充限制endTime必须在startTime之后，且endTime时刻为23:59
data的return中

通过disabledDate的返回值来确定是否禁用, 但是方法里面的this却拿到的却不是当前的vue实例, 会报错,this找不到time属性,那么关键在于如何使this指向当前的vue实例,其方法便是使用箭头函数 item => { }
摘抄自：iview datepicker disabledate 控制日期组件不可选

endOptions: {
        disabledDate: date => {
          if (self.startTime) {
            return date && date.valueOf() < new Date(self.startTime).valueOf();
          }
        },
      },

render函数中endTime的props中添加
options: self.endOptions,
render函数中endTime的on修改为

on: {
        'on-change': (val) => {
         val = val.substr(0, 10) + ' 23:59'
         self.endTime = val
         },
       }