标题：*
140 字

TAG标签：（用空格隔开）
30 字

恢复历史版本：

HTML转MD HTML转MD2

<p><a href="https://www.jianshu.com/p/d8d13dab271b" _src="https://www.jianshu.com/p/d8d13dab271b">https://www.jianshu.com/p/d8d13dab271b</a> </p><p><br/></p><h2>介绍</h2><blockquote><p>iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。</p></blockquote><h2>基础</h2><blockquote><p>官网是最好的资料!<br/><a href="https://link.jianshu.com?t=https%3A%2F%2Fcn.vuejs.org" target="_blank" rel="nofollow">Vue官网地址</a><br/><a href="https://link.jianshu.com?t=https%3A%2F%2Fwww.iviewui.com%2F" target="_blank" rel="nofollow">iView官网地址</a><br/>感谢网友：成都-前端-鬼鬼</p></blockquote><h4>入门须知</h4><h2>实战</h2><h2>坑01：注意标签的书写规定<p><img data-original-src="//upload-images.jianshu.io/upload_images/8185387-9bc004efd6f6e3e9.png" data-original-width="790" data-original-height="429" data-original-format="image/png" data-original-filesize="38207" class="" style="cursor: zoom-in;" src="//upload-images.jianshu.io/upload_images/8185387-9bc004efd6f6e3e9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/790/format/webp"/></p><p>图-01</p></h2><p><a href="https://link.jianshu.com?t=http%3A%2F%2Fv1.iviewui.com%2Fcomponents%2Fdate-picker" target="_blank" rel="nofollow">iview-V1.1的官网</a>参考！</p><h2>坑02：日期组件的数据绑定</h2><p><img data-original-src="//upload-images.jianshu.io/upload_images/8185387-2c558e56decfa375.png" data-original-width="1093" data-original-height="487" data-original-format="image/png" data-original-filesize="64168" class="" style="cursor: zoom-in;" src="//upload-images.jianshu.io/upload_images/8185387-2c558e56decfa375.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp"/></p><p>图-01</p><blockquote><p>今天第一次使用iview组件开发项目模块，之前使用vue进行数据绑定的时候通常使用v-model进行数据绑定，但是今天使用v-model进行iview中日期的数据绑定遇到了日期数据的格式问题。因此下班之余分享给大家，希望大家以后可以避免入坑。以后随着iview的使用，会将开发过程中遇到的问题每天总结汇总至此，希望可以给大家提供一点帮助。</p></blockquote><h6>复杂处理方式</h6><ul class=" list-paddingleft-2"><li><p>步骤一：引入需要的外部文件（此处为了方便，直接使用CDN）</p></li></ul><pre class="hljs xml">&lt;script&nbsp;src=&quot;http://www.jq22.com/jquery/jquery-2.1.1.js&quot;&gt;&lt;/script&gt;&lt;link&nbsp;href=&quot;https://cdn.bootcss.com/iview/2.7.4/styles/iview.css&quot;&nbsp;rel=&quot;stylesheet&quot;&gt;&lt;script&nbsp;src=&quot;http://www.jq22.com/jquery/vue.min.js&quot;&gt;&lt;/script&gt;&lt;script&nbsp;src=&quot;https://cdn.bootcss.com/iview/2.7.4/iview.min.js&quot;&gt;&lt;/script&gt;</pre><ul class=" list-paddingleft-2"><li><p>步骤二：添加iview中的时间组件Date-Picker</p></li></ul><pre class="hljs javascript">&lt;Date-Picker&nbsp;type=&quot;daterange&quot;&nbsp;placement=&quot;bottom-end&quot;&nbsp;placeholder=&quot;选择日期&quot;&nbsp;style=&quot;width:&nbsp;200px&quot;&nbsp;v-model=&quot;q.date&quot;&gt;&lt;/Date-Picker&gt;</pre><ul class=" list-paddingleft-2"><li><p>步骤三：绑定数据</p></li></ul><pre class="hljs bash">v-model=&quot;q.date&quot;</pre><ul class=" list-paddingleft-2"><li><p>步骤三：JS处理日期格式</p></li></ul><pre class="hljs javascript">var&nbsp;dateTimeStart&nbsp;=&nbsp;new&nbsp;Date(vm.q.data[0]);var&nbsp;dateTimeEnd&nbsp;=&nbsp;new&nbsp;Date(vm.q.data[1]);
dateTimeStartForm&nbsp;=&nbsp;dateTimeStart.getFullYear()&nbsp;+&nbsp;&#39;-&#39;&nbsp;+&nbsp;(dateTimeStart.getMonth()&nbsp;+&nbsp;1)&nbsp;+&nbsp;&#39;-&#39;&nbsp;+&nbsp;dateTimeStart.getDate();
dateTimeEndForm&nbsp;=&nbsp;dateTimeEnd.getFullYear()&nbsp;+&nbsp;&#39;-&#39;&nbsp;+&nbsp;(dateTimeEnd.getMonth()&nbsp;+&nbsp;1)&nbsp;+&nbsp;&#39;-&#39;&nbsp;+&nbsp;dateTimeEnd.getDate();</pre><h6>优化处理方式</h6><ul class=" list-paddingleft-2"><li><p>步骤一：引入需要的外部文件（此处为了方便，直接使用CDN）</p></li></ul><pre class="hljs xml">&lt;script&nbsp;src=&quot;http://www.jq22.com/jquery/jquery-2.1.1.js&quot;&gt;&lt;/script&gt;&lt;link&nbsp;href=&quot;https://cdn.bootcss.com/iview/2.7.4/styles/iview.css&quot;&nbsp;rel=&quot;stylesheet&quot;&gt;&lt;script&nbsp;src=&quot;http://www.jq22.com/jquery/vue.min.js&quot;&gt;&lt;/script&gt;&lt;script&nbsp;src=&quot;https://cdn.bootcss.com/iview/2.7.4/iview.min.js&quot;&gt;&lt;/script&gt;</pre><ul class=" list-paddingleft-2"><li><p>步骤二：添加iview中的时间组件Date-Picker</p></li></ul><pre class="hljs javascript">&lt;Date-Picker&nbsp;type=&quot;daterange&quot;&nbsp;placement=&quot;bottom-end&quot;&nbsp;placeholder=&quot;选择日期&quot;&nbsp;style=&quot;width:&nbsp;200px&quot;&nbsp;:value=&quot;q.date&quot;&nbsp;@on-change=&quot;timeChange&quot;&gt;&lt;/Date-Picker&gt;</pre><ul class=" list-paddingleft-2"><li><p>步骤三：绑定数据（注意此处不使用v-model，改用:value）</p></li></ul><pre class="hljs ruby">:value=&quot;q.date&quot;</pre><ul class=" list-paddingleft-2"><li><p>步骤四：添加选择后的改变事件（为了将时间数据传给q.date）</p></li></ul><pre class="hljs javascript">timeChange:&nbsp;function(date)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;this.q.date&nbsp;=&nbsp;date;
}</pre><ul class=" list-paddingleft-2"><li><p>步骤五：将数据提交到后台</p></li></ul><pre class="hljs javascript">filter:&nbsp;function(event)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;vm.showList&nbsp;=&nbsp;true;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;page&nbsp;=&nbsp;$(&quot;#jqGrid&quot;).jqGrid(&#39;getGridParam&#39;,&nbsp;&#39;page&#39;);
&nbsp;&nbsp;&nbsp;&nbsp;$(&quot;#jqGrid&quot;).jqGrid(&#39;setGridParam&#39;,&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;postData:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;username&#39;:&nbsp;vm.q.username,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;dateTimeStartForm&#39;:&nbsp;vm.q.data[0],&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;dateTimeEndForm&#39;:&nbsp;vm.q.data[1]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page:&nbsp;page
&nbsp;&nbsp;&nbsp;&nbsp;}).trigger(&quot;reloadGrid&quot;);
}</pre><p><br/><br/></p>