IView

网络选图

介绍

iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

基础

官网是最好的资料!
Vue官网地址
iView官网地址
感谢网友：成都-前端-鬼鬼

入门须知

实战

坑01：注意标签的书写规定 图-01

iview-V1.1的官网参考！

坑02：日期组件的数据绑定

图-01

今天第一次使用iview组件开发项目模块，之前使用vue进行数据绑定的时候通常使用v-model进行数据绑定，但是今天使用v-model进行iview中日期的数据绑定遇到了日期数据的格式问题。因此下班之余分享给大家，希望大家以后可以避免入坑。以后随着iview的使用，会将开发过程中遇到的问题每天总结汇总至此，希望可以给大家提供一点帮助。

复杂处理方式

• 步骤一：引入需要的外部文件（此处为了方便，直接使用CDN）

<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
<link href="https://cdn.bootcss.com/iview/2.7.4/styles/iview.css" rel="stylesheet">
<script src="http://www.jq22.com/jquery/vue.min.js"></script>
<script src="https://cdn.bootcss.com/iview/2.7.4/iview.min.js"></script>

• 步骤二：添加iview中的时间组件Date-Picker

<Date-Picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px" v-model="q.date"></Date-Picker>

• 步骤三：绑定数据

v-model="q.date"

• 步骤三：JS处理日期格式

var dateTimeStart = new Date(vm.q.data[0]);
var dateTimeEnd = new Date(vm.q.data[1]);
dateTimeStartForm = dateTimeStart.getFullYear() + '-' + (dateTimeStart.getMonth() + 1) + '-' + dateTimeStart.getDate();
dateTimeEndForm = dateTimeEnd.getFullYear() + '-' + (dateTimeEnd.getMonth() + 1) + '-' + dateTimeEnd.getDate();

优化处理方式

• 步骤一：引入需要的外部文件（此处为了方便，直接使用CDN）

<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
<link href="https://cdn.bootcss.com/iview/2.7.4/styles/iview.css" rel="stylesheet">
<script src="http://www.jq22.com/jquery/vue.min.js"></script>
<script src="https://cdn.bootcss.com/iview/2.7.4/iview.min.js"></script>

• 步骤二：添加iview中的时间组件Date-Picker

<Date-Picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px" :value="q.date" @on-change="timeChange"></Date-Picker>

• 步骤三：绑定数据（注意此处不使用v-model，改用:value）

:value="q.date"

• 步骤四：添加选择后的改变事件（为了将时间数据传给q.date）

timeChange: function(date) {
    this.q.date = date;
}

• 步骤五：将数据提交到后台

filter: function(event) {
    vm.showList = true;
    var page = $("#jqGrid").jqGrid('getGridParam', 'page');
    $("#jqGrid").jqGrid('setGridParam', {
        postData: {
            'username': vm.q.username,
            'dateTimeStartForm': vm.q.data[0],
            'dateTimeEndForm': vm.q.data[1]
        },
        page: page
    }).trigger("reloadGrid");
}