总结：iview（基于vue.js的开源ui组件）学习的一些坑(二）

最新推荐文章于 2026-04-28 09:01:12 发布

原创最新推荐文章于 2026-04-28 09:01:12 发布 · 971 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#iview

vue 专栏收录该内容

9 篇文章

订阅专栏

本文档详细解析了iView UI框架在实际应用中遇到的常见问题，包括Modal框数据残留、表单验证、select组件选项填充、table表格行选择及列事件绑定、日期组件验证与格式化、删除操作失败、路由跳转失效等问题的解决方法。

1、iview中modal遇到的一点问题，在新增内容时，需要弹出Modal框（modal框包含一个表单），第一次就是默认的placeholder数据，可是第二次打开时，就是上一次填的值。官网并没有提醒。。。

解决办法是：用watch监听函数，监听modal框，当打开时如果里面有数据就清空，或者关闭这个modal框时，顺便把数据清空。

其中add_model时双向绑定到Madal框上的

   <Modal v-model="add_model" width="360" footer-hide>
        ...
   </Modal>

  watch:{
            add_model: function (value) {
                if (value === false) {
                    this.typeItem = {
                        type_id:0,
                        type_name:'',
                        type_desc: '',      
                    }
                }
            },
        },

注意：这里value，值时modal框的状态，true表示打开，false表示关闭。经测试，在这里value===true和value===false一样的效果。

2、设置类型时，需要请求接口为select组件的option填充数据，代码如下

请求的是类型接口，类型接口里面数据很多，于是只取了两项，一是type_name。一是id（一开始这里不是id,这里有个坑，后面填）。先创建一个对象{}，再向对象里面填充数组[].

    //获取公告类型
            getInformType(){
               getTypeList(this.tid, this.tpage_size, this.tpage_num,this.tkeyword).then(res=>{
                //组装类型到option里面
               var type={};
                  if(res.ret===200 && res.data!==null){
                   for(var i=0;i<res.data.list.length;i++){
                       var labelData=res.data.list[i].type_name
                       type.value=res.data.list[i].id;
                       type.label=labelData;
                      this.List.push(type);
                      console.log(this.List);
                   }
                  }
               })      
            },

给10s思考一下为什么报错？？？

看输出以为是闭包，但是改var 为let也是报一样的错误。

后来发现，是再循环外面定义的type={}对象，应该每次都重新定义一个对象，每次给List数组里面压入一个新的对象。

这样就好了，完美的取到了公告类型。

3、关于select框的表单验证，明明选了，但是一直提示你这个框是空的。

填坑2，本来type_name用来取到类型，id用来给option的key值绑定，想着key 要不一样的，所以直接取了i。

type.value=i;

目前没报什么错误。等到了新增公告信息的时候，根据2取到类型，也很好的在页面加载时都列出来了，但是点击提交时，验证不通过，说不应该为空。最后找到了原因：因为iview默认校验数据类型为String，而我的select用的value是number类型的。

所以后来我把value值赋值为id了，这是一个字符串。

4、iview中如何选中table表格的一行，如何对某一列特定数据绑定点击事件，实现需求。

官方文档table表中有一事件@on-row-click，当点击某一行时触发。

如果要单独给某一列添加点击事件，需要用到render渲染函数。

render: (h, params) => {
                            return h('span', { 
                            on: {
                                        click: () => {
                                            console.log(params.row);
                                           this.toDetail(params.row);
                                        }
                                }
                            },params.row.title)
                       }

其中点击这一列，render函数的Params是这一行的数据。长下面这样，本条数据应该填params.row.title。

4、关于iview日期组件的表单验证，明明选了，但是一直提示你这个框是空的。绑定数据可以用v-model。

（1）验证的时候多加一句代码即可。pattern: /.+/

  report_end_time:[
                         { required: true, message: '请选择日期', pattern: /.+/,trigger: 'change' }
                    ],

官方解决：

加type="date",但是这会报错

因为：date-picker本身支持字符串和date object两种类型，但是json中的字符串绑定之后在效验时就不是date object，所以出现了异常。

改为type="string"就好了。

（2）提交日期的时候，框里显示是2019-01-01，但是提交到后台的数据是

导致提交的日期在查询页面不能显示。

解决:利用日期组件的@on-change事件

这样就能返回格式化后的时间，并且提交给后台。

<DatePicker type="date"  v-model="report.report_end_time" @on-change="date" placeholder="请选择日期" ></DatePicker>
date(option){
              this.report.report_end_time=option;
          },

事情还没有结束，继续填坑。

后面要实现需求，对所填内容进行编辑，编辑的时候我把那一组数据都传到了编辑页面，当然日期也传过来了，不用说，日期又是上面那个中国标准时间，而这边我们给的日期组件的验证是type=‘string'，所以验证不通过，除非用户在自己修改一下日期。

看到默认填在日期组件里的时间是对象，所以把验证规则改为了type='date',这样修改页面一进来所有的数据都是验证通过的。经过排查，之前报value.getTime，是因为@on-change立刻把时间变成了2019-01-01这样的字符串，所以验证规则立马又不通过了，所以把@on-change删去。时间的格式化在提交接口前进行转化即可。

  <DatePicker type="date"  v-model="report.report_end_time"  placeholder="请选择日期" ></DatePicker>
 var d = new Date(app.report.report_end_time);  
          var datetime=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
          app.report.report_end_time=datetime;
          addType(app.report).then(res => {})

5、在删除某一条数据的时候，把该条数据id已经正确提交，但是显示删除失败。用fidder抓包工具，查看后返回203状态码。

203 (Non-Authoritative Information/非官方信息)

　　状态码203 (SC_NON_AUTHORITATIVE_INFORMATION)是表示文档被正常的返回，但是由于正在使用的是文档副本所以某些响应头信息可能不正确。这是 HTTP 1.1中新加入的。
解决：后台改接口。

6、嵌套路由，写好了路由点击跳转时，浏览器url已经改变，但是页面并未跳转。

原因：在父组件跳转到子组件时，父组件在不可能显示子组件。需要在父组件中添加