网络选图
介绍
iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。
基础
入门须知
实战
坑01：注意标签的书写规定
![]()
图-01
图-01
坑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");
}
