2019-08-07笔记
iView自带的筛选组件是Checkbox类型的，而项目要求时间组件(datepicker)进行条件筛选，使用iView的Table自带renderHeader函数添加poptip和datepicker组件来实现。
实现效果如下：
image
部分代码如下：
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
},
}
