iview小记

项目使用iview总结：(待续...)

一、修改iview默认样式
1、在根目录下创建my-theme文件夹，文件夹内创建index.less文件
my-theme -> index.less
2、先引入文件 @import '~iview/src/styles/index.less';  再用自定义样式覆盖
3、在src -> main.js 中引入import '../my-theme/index.less'即可

二、Form（input、select...）事件调用方法
<Input v-model="value" placeholder="input" @on-focus=“eventFun”></Input>

三、Table
render函数中params返回的值为当前行的索引和值；
1、render函数修改表格中返回的值
{
    title: '实际付款（元）',
    key: 'detailTotalAmount',
    width: 150,
    render: (h, params) => {
        return h('div', params.row.detailTotalAmount/100)
    }
},
2、表格中添加多选框
{
    title: 选择',
    key: 'isNum',
    align:'center',
    width: 140,
    render: (h, params) => {
        var self = this;
        return h('Checkbox', {
            props: {
                value: true,
            },
            on: {
                'on-change': (value) => {
                    console.log(value);
                }
            }
        })
    }
},

四、DatePicker 日期选择器
1、限制日期选择的范围（例：只能选一个月前或一个月后）
DOM结构：
<FormItem>
    <DatePicker type="date" format="yyyy-MM-dd" :options="pickerBeginDateBefore" v-model="searchData.orderDayStart" placeholder="起始日期"></DatePicker>
</FormItem>
<FormItem>
    <DatePicker type="date" format="yyyy-MM-dd" :options="pickerBeginDateAfter" v-model="searchData.orderDayEnd" placeholder="结束日期"></DatePicker>
</FormItem>
---------------------
data(){
pickerBeginDateBefore:{
   disabledDate: (time) => {
        let beginDateVal = this.searchData.orderDayEnd;
        beginDateVal = Date.parse(beginDateVal); 
        if (beginDateVal) {
            return (time.valueOf() > Date.now()) || time.getTime() > beginDateVal || time.getTime() <(beginDateVal - 31*24*60*60*1000);
        }else{
            return time && time.valueOf() > Date.now();
        }
    }
},
pickerBeginDateAfter:{
    disabledDate: (time) => {
        let beginDateVal = this.searchData.orderDayStart;
        beginDateVal = Date.parse(beginDateVal); 
        if (beginDateVal) {
            return (time.valueOf() > Date.now()) || time.getTime() < beginDateVal || time.getTime() >(beginDateVal + 31*24*60*60*1000);
        }else{
            return time && time.valueOf() > Date.now();
        }
    }
},
}