vuejs中使用element UI 时间选择器和下拉框选择器的问题

现在前端的UI框架有很多，通常vuejs中会使用element UI，（个人觉得这个框架真的超好用）但使用框架的不好之处就在于有些东西比较难以把控，这里介绍一下使用datepicker遇到的小问题以及我的解决办法，希望能给大家一点启发。目前我遇到的比较麻烦的问题主要有两个，一个是将它的值从前端传到后端时的数据格式问题，另一个是将后端的值传到前端赋给它作为value时的数据格式问题。还有一个下面一一介绍。

（1）el-date-picker这个组件的第一个问题是他的数据格式，我们想要的是2007-9-9 这种的，但他的格式却是这种的（黑人问号脸）

Fri Sep 22 2017 00:00:00 GMT+0800

第一个解决办法是定义一个过滤器，写法如下：

filters:{
        dateFilter:function (input) {
            var d = new Date(input);
            var year = d.getFullYear();
            var month = d.getMonth() + 1;
            var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate();
            var hour = d.getHours();
            var minutes = d.getMinutes();
            var seconds = d.getSeconds();
            return  year+ '-' + month + '-' + day;
        }
    },

然后写输出的时间的数据的时候，写法如下（比如说你的el-date-picker的value值定义为time）：time|dateFilter

-------------------------------------------------------------------------------------------------------------------------------------------------------

第二种解决办法是定义一个方法，写法如下：

methods: {
      dateFilter:function (input) {
          var d = new Date(input);
          var year = d.getFullYear();
          var month = d.getMonth() + 1;
          var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate();
          var hour = d.getHours();
          var minutes = d.getMinutes();
          var seconds = d.getSeconds();
          return  year+ '-' + month + '-' + day;
      }

}

然后你的数据输出格式可以写成this.dateFilter(time)；

------------------------------------------------------------------------------------------------------------------------------------------------------

第三种解决办法，我还没试，或许有效，老铁们如果试了上面两种之后都没用的话，建议可以试试下面这种，一个可爱的链接送给大家

https://www.cnblogs.com/Mrrabbit/p/7716552.html

-------------------------------------------------------分割线------------------------------------------------------------------------------------------

（2）第二个问题，当我们把从后端请求过来的时间值赋给它（这里的前提是你赋给它的值的格式为上一个问题中提到的转换之后的2007-9-9 这种），你会发现他总是提示时间选择器的值为空，这时候，需要用一个函数将从后端传过来的值的格式进行一下转化，当当当当

Date(time);

就是他了，因为后端的数据格式是String类型的，传到前端的时候他会因为类型不一致从而判断值为空，但数据还是会显示在选择器上面。

-------------------------------------------------------分割线------------------------------------------------------------------------------------------

（3）既然上面提到了从后端请求数据赋给前端时类型的问题，那我们下面再说下使用另外一个组件时的类似的问题。

它就是下拉框的选择器，因为我们赋值的时候是赋给value，value的类型是int型的，但对应的label的值（也就是显示在选项里面的值）是String类型的，所以当我们把后端的int型 的值赋给选择器的value时，他也会显示值为空，那么这个问题该怎么办呢？其实很简单。举个栗子

template的内容如下：

<el-form-item label="学生类别:" prop="industry_type_num" >
        <el-select v-model="ruleFormEdit.student_type_num">
               <el-option v-for="item in studentType" :label="item.student_type_name"//这里用一个循环来显示studentType这个数组里面的student_type_name；

:value="String(item.student_type_num)">//这里也是用循环来显示studentType这个数组里的student_type_num，int型；

       </el-option>
        </el-select>
</el-form-item >

然后传值的时候在下面的方法里面写如下语句：this.ruleFormEdit.student_type_num=String(this.studentType[0].student_type_num);//这里根据你传过来的值是数组还是其他自行变通。

这样就会正确显示选择器的值了