[聚合文章] IView

今天第一次使用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="选择日期"  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="选择日期"  :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");}
                
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。